Súčasné editovanie a mazanie prvkov

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

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

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

html<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ý.

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

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