Editarea și ștergerea simultană a elementelor

Să presupunem că avem un set de paragrafe:

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

Să facem pentru aceste paragrafe astfel încât să fie posibil să edităm textul fiecărui paragraf și, în același timp, la sfârșitul fiecărui paragraf să fie un link pentru ștergere.

La implementarea sarcinii descrise, ne așteaptă o anumită problemă.

Pentru a înțelege esența problemei, să ne uităm la codul HTML care va rezulta, când la sfârșitul fiecărui paragraf vor fi adăugate linkurile pentru ștergere:

<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>

Să ne imaginăm acum că, la click pe orice paragraf, în el va apărea un câmp de introducere pentru editarea textului. În acest caz, în câmp va intra întregul text al paragrafului - împreună cu linkul de ștergere!

Desigur, acest lucru nu este corect.

O soluție mai bună ar fi să împachetăm textele paragrafelor în taguri span, astfel:

<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>

Pentru un astfel de cod, se poate simplu atașa un eveniment pentru editare nu paragrafului în sine, ci lui span cu textul. În acest caz, câmpul pentru editare va apărea în tagul span, iar linkul nostru pentru ștergere va rămâne neatins.

Este dat următorul cod HTML:

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

Adăugați un link pentru ștergere la sfârșitul fiecărui paragraf.

Faceți astfel încât la click pe span în el să apară un câmp pentru editare.

Să presupunem acum că inițial nu există taguri span:

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

Împachetați mai întâi textul paragrafului în taguri span, adăugați acestor taguri posibilitatea de editare, apoi adăugați la sfârșitul fiecărui paragraf un link pentru ștergere.