Súčasné editovanie a mazanie prvkov

Predpokladajme, že máme určitú množinu odsekov:

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

Urobme pre tieto odseky to, aby bolo možné editovať text každého odseku a zároveň na konci každého odseku bola odkaz na odstránenie.

Pri implementácii opísanej úlohy nás čaká určitý problém.

Aby sme pochopili podstatu problému, pozrime sa na HTML kód, ktorý vznikne, keď sa na koniec každého odseku pridajú odkazy na odstránenie:

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

Predstavme si teraz, že pri kliknutí na akýkoľvek odsek sa v ňom objaví vstupné pole pre editáciu textu. V takom prípade by sa do vstupného pola dostal celý text odseku - spolu s odkazom na odstránenie!

To, samozrejme, nie je správne.

Vhodnejším riešením by bolo zabaliť texty odsekov do tagov span, takto:

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

Pre takýto kód je možné jednoducho pridať udalosť pre editáciu nie na celý odsek, ale na span s textom. V tomto prípade sa vstupné pole pre editáciu objaví v tagu span a náš odkaz na odstránenie zostane nedotknutý.

Daný je nasledujúci HTML kód:

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

Pridajte odkaz na odstránenie na koniec každého odseku.

Zaistite, aby pri kliknutí na span sa v ňom objavilo vstupné pole pre editáciu.

Predpokladajme teraz, že spočiatku tagy span nie sú:

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

Najprv zabalte text odseku do tagov span, pridajte k týmto tagom možnosť editácie, a potom pridajte na koniec každého odseku odkaz na odstránenie.