Istovremeno uređivanje i brisanje elemenata

Neka postoji određeni skup paragrafa:

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

Omogućimo za ove paragrafe da tekst svakog paragrafa može da se uređuje i da na kraju svakog paragrafa stoji link za brisanje.

Prilikom implementacije opisanog zadatka suočićemo se sa određenim problemom.

Kako bismo razumeli suštinu problema, hajde da pogledamo HTML kod koji će se dobiti, kada se na kraj svakog paragrafa dodaju linkovi za brisanje:

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

Zamislimo sada da će se klikom na bilo koji paragraf u njemu pojaviti polje za unos (input) za uređivanje teksta. U tom slučaju će u polje za unos dospeti ceo tekst paragrafa - zajedno sa linkom za brisanje!

To, naravno, nije ispravno.

Bolje rešenje bi bilo da se tekstovi paragrafa obmotaju u tagove span, ovako:

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

Za takav kod može se jednostavno postaviti događaj za uređivanje ne na sam paragraf, već na span sa tekstom. U tom slučaju polje za unos za uređivanje će se pojaviti u tagu span, a naš link za brisanje će ostati netaknut.

Dat je sledeći HTML kod:

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

Dodajte link za brisanje na kraju svakog paragrafa.

Učinite da se klikom na span u njemu pojavi polje za unos za uređivanje.

Neka sada u početku ne postoje tagovi span:

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

Prvo obmotajte tekst paragrafa u tagove span, dodajte ovim tagovima mogućnost uređivanja, a zatim dodajte na kraj svakog paragrafa link za brisanje.