Jednoczesne edytowanie i usuwanie elementów

Załóżmy, że mamy pewien zestaw akapitów:

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

Zróbmy tak, aby dla tych akapitów można było edytować tekst każdego akapitu i jednocześnie na końcu każdego akapitu znajdował się link do usunięcia.

Podczas implementacji opisanego zadania czeka nas pewien problem.

Aby zrozumieć istotę problemu, spójrzmy na kod HTML, który otrzymamy, gdy na końcu każdego akapitu zostaną dodane linki do usunięcia:

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>

Wyobraźmy sobie teraz, że po kliknięciu na dowolny akapit pojawi się w nim input do edycji tekstu. W tym przypadku do inputa trafi cały tekst akapitu - razem z linkiem do usunięcia!

Jest to, oczywiście, nieprawidłowe.

Lepszym rozwiązaniem będzie opakowanie tekstów akapitów w znaczniki span, o tak:

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>

Dla takiego kodu można po prostu powiesić zdarzenie do edycji nie na sam akapit, ale na span z tekstem. W tym przypadku input do edycji pojawi się w znaczniku span, a nasz link do usunięcia pozostanie nietknięty.

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>