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.