Elementide samaaegne muutmine ja kustutamine

Olgem meil mõni hulk lõike:

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

Teeme nende lõigute jaoks nii, et iga lõigu teksti saaks muuta ja samal ajal iga lõigu lõpus oleks kustutamise link.

Kirjeldatud ülesande rakendamisel ootab meid mõningane probleem.

Probleemi olemuse mõistmiseks vaatame HTML-koodi, mis saadakse siis, kui iga lõigu lõppu on lisatud kustutamise lingid:

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

Kujutagem nüüd ette, et klõpsates mis tahes lõigul, kuvatakse selles sisendväli teksti muutmiseks. Sellisel juhul satub sisendvälja kogu lõigu tekst - koos kustutuslingiga!

See pole muidugi õige.

Parema lahendusena oleks tekstide ümbermöödimine span siltidesse, nii:

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

Sellise koodi puhul saab lihtsalt lisada sündmuse muutmiseks mitte tervele lõigule, vaid tekstiga span-le. Sel juhul kuvatakse sisendväli muutmiseks span sildis ja meie kustutuslink jääb puutumata.

Antud on järgmine HTML-kood:

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

Lisage iga lõigu lõppu kustutuslink.

Seadistage nii, et klõpsates span kuvatakse selles sisendväli muutmiseks.

Olgem nüüd, et algselt pole span silte:

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

Määrige kõigepealt lõigu tekst span siltidesse, lisage nendele siltidele muutmise võimalus, ja seejärel lisage iga lõigu lõppu kustutuslink.