Gelijktijdig bewerken en verwijderen van elementen
Stel we hebben een verzameling paragrafen:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Laten we voor deze paragrafen regelen dat we de tekst van elke paragraaf kunnen bewerken en dat aan het einde van elke paragraaf een link staat om te verwijderen.
Bij de implementatie van de beschreven taak wachten we een probleem.
Om de essentie van het probleem te begrijpen, laten we kijken naar de HTML-code die wordt verkregen wanneer aan het einde van elke paragraaf verwijderlinks worden toegevoegd:
<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>
Stel je nu voor dat bij een klik op een willekeurige paragraaf er een invoerveld voor bewerking van de tekst verschijnt. In dat geval komt alle tekst van de paragraaf in het invoerveld terecht - samen met de verwijderlink!
Dat is natuurlijk niet correct.
Een betere oplossing is om de teksten
van de paragrafen te wrappen in span tags, zoals dit:
<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>
Voor zo'n code kunnen we simpelweg een gebeurtenis
voor bewerking toevoegen, niet aan de paragraaf zelf, maar aan de
span met de tekst. In dat geval zal het invoerveld
voor bewerking verschijnen in de span tag,
en onze verwijderlink blijft onaangetast.
De volgende HTML-code is gegeven:
<div id="parent">
<p><span>text1</span></p>
<p><span>text2</span></p>
<p><span>text3</span></p>
</div>
Voeg een verwijderlink toe aan het einde van elke paragraaf.
Zorg ervoor dat bij een klik op de span
er een invoerveld voor bewerking verschijnt.
Stel dat er initieel geen span tags zijn:
<div id="parent">
<p>text1</p>
<p>text2</p>
<p>text3</p>
</div>
Wrap eerst de tekst van de paragraaf in span tags,
voeg de bewerkingsmogelijkheid toe aan deze tags,
en voeg dan aan het einde van elke paragraaf een link
toe om te verwijderen.
