Édition et suppression simultanées d'éléments

Supposons que nous ayons un certain ensemble de paragraphes :

<div id="parent">
	<p>text1</p>
	<p>text2</p>
	<p>text3</p>
</div>

Faisons en sorte pour ces paragraphes qu'il soit possible de modifier le texte de chaque paragraphe et qu'à la fin de chaque paragraphe se trouve un lien de suppression.

Lors de la mise en œuvre de la tâche décrite, nous rencontrerons un certain problème.

Pour comprendre l'essence du problème, regardons le code HTML qui sera obtenu lorsque les liens de suppression seront ajoutés à la fin de chaque paragraphe :

<div id="parent">
	<p>text1<a href="">remove</a></p>
	<p>text2<a href="">remove</a></p>
	<p>text3<a href="">remove</a></p>
</div>

Imaginons maintenant qu'un clic sur n'importe quel paragraphe fasse apparaître un champ de saisie pour modifier le texte. Dans ce cas, tout le texte du paragraphe sera placé dans le champ de saisie - y compris le lien de suppression !

Ce n'est bien sûr pas correct.

Une solution plus judicieuse serait d'envelopper les textes des paragraphes dans des balises span, comme ceci :

<div id="parent">
	<p><span>text1</span><a href="">remove</a></p>
	<p><span>text2</span><a href="">remove</a></p>
	<p><span>text3</span><a href="">remove</a></p>
</div>

Pour un tel code, on peut simplement attacher l'événement pour l'édition non pas au paragraphe lui-même, mais à span avec le texte. Dans ce cas, le champ de saisie pour l'édition apparaîtra dans la balise span, et notre lien de suppression restera intact.

Voici le code HTML suivant :

<div id="parent">
	<p><span>text1</span></p>
	<p><span>text2</span></p>
	<p><span>text3</span></p>
</div>

Ajoutez un lien de suppression à la fin de chaque paragraphe.

Faites en sorte qu'un clic sur span fasse apparaître un champ de saisie pour modification.

Supposons maintenant qu'il n'y ait initialement pas de balises span :

<div id="parent">
	<p>text1</p>
	<p>text2</p>
	<p>text3</p>
</div>

Enveloppez d'abord le texte du paragraphe dans des balises span, ajoutez à ces balises la possibilité d'édition, puis ajoutez à la fin de chaque paragraphe un lien de suppression.