Jednoczesne edytowanie i usuwanie elementów

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

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

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

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

Dany jest następujący kod HTML:

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

Dodaj link do usunięcia na końcu każdego akapitu.

Zrób tak, aby po kliknięciu na span pojawił się w nim input do edycji.

Załóżmy teraz, że początkowo nie ma znaczników span:

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

Najpierw opakuj tekst akapitu w znaczniki span, dodaj do tych znaczników możliwość edycji, a następnie dodaj na końcu każdego akapitu link do usunięcia.