Sočasno urejanje in brisanje elementov

Recimo, da imamo niz odstavkov:

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

Naredimo za te odstavke tako, da lahko uredimo besedilo vsakega odstavka in hkrati na koncu vsakega odstavka je povezava za brisanje.

Pri implementaciji opisanega naloge nas čaka določena težava.

Da bi razumeli bistvo težave, poglejmo HTML kodo, ki jo bomo dobili, ko bodo na konec vsakega odstavka dodane povezave za brisanje:

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

Predstavljajmo si zdaj, da ob kliku na katerikoli odstavek se v njem prikaže vnosno polje za urejanje besedila. V tem primeru bi v vnosno polje prišlo celotno besedilo odstavka - skupaj s povezavo za brisanje!

To seveda ni pravilno.

Boljša rešitev bi bila, da besedila odstavkov ovijemo v oznake span, takole:

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

Za takšno kodo lahko preprosto dodamo dogodek za urejanje ne na sam odstavek, temveč na span z besedilom. V tem primeru se bo vnosno polje za urejanje prikazalo v oznaki span, naša povezava za brisanje pa bo ostala nedotaknjena.

Podan je naslednji HTML koda:

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

Dodajte povezavo za brisanje na konec vsakega odstavka.

Naredite tako, da ob kliku na span se v njem prikaže vnosno polje za urejanje.

Recimo, da na začetku ni oznak span:

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

Najprej ovijte besedilo odstavka v oznake span, dodajte tem oznakam možnost urejanja, nato pa na konec vsakega odstavka dodajte povezavo za brisanje.