Egyidejű szerkesztés és törlés elemek

Tegyük fel, hogy van egy bizonyos bekezdéshalmazunk:

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

Tegyük meg ezeknél a bekezdéseknél úgy, hogy lehessen szerkeszteni az egyes bekezdések szövegét, és ugyanakkor minden bekezdés végén legyen egy törlő hivatkozás.

A leírt feladat megvalósításakor egy bizonyos problémával kell szembenéznünk.

Ahhoz, hogy megértsük a probléma lényegét, nézzük meg a HTML kódot, amely akkor jön létre, amikor minden bekezdés végéhez hozzáadódnak a törlő hivatkozások:

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

Képzeljük el most, hogy bármelyik bekezdésre kattintáskor egy beviteli mező jelenik meg benne a szöveg szerkesztéséhez. Ebben az esetben a beviteli mezőbe a teljes bekezdés szövege kerül - a törlő hivatkozással együtt!

Ez természetesen nem helyes.

Sikeresebb megoldás lenne a bekezdések szövegét span tag-ekbe csomagolni, így:

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

Egy ilyen kódnál egyszerűen a szerkesztés eseményét nem magára a bekezdésre, hanem a span tag-re lehet rákötni. Ebben az esetben a szerkesztéshez szükséges beviteli mező a span tag-ben jelenik meg, és a törlő hivatkozásunk érintetlen marad.

Adott a következő HTML kód:

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

Adjon hozzá egy törlő hivatkozást minden bekezdés végéhez.

Tegye meg, hogy a span tag-re kattintáskor egy beviteli mező jelenjen meg benne a szerkesztéshez.

Tegyük fel most, hogy kezdetben nincsenek span tag-ek:

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

Csomagolja be először a bekezdés szövegét span tag-ekbe, adja hozzá ezekhez a tag-ekhez a szerkesztési lehetőséget, majd helyezzen el minden bekezdés végén egy törlő hivatkozást.