Simultánní editace a mazání prvků

Předpokládejme, že máme určitou sadu odstavců:

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

Pojďme pro tyto odstavce zařídit, aby bylo možné editovat text každého odstavce a zároveň na konci každého odstavce byla odkaz pro smazání.

Při implementaci popsaného úkolu nás čeká určitý problém.

Abychom pochopili podstatu problému, podívejme se na HTML kód, který vznikne, když na konec každého odstavce budou přidány odkazy pro smazání:

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

Představme si nyní, že při kliknutí na jakýkoli odstavec se v něm objeví input pro editaci textu. V tomto případě se do inputu dostane celý text odstavce - včetně odkazu pro smazání!

To samozřejmě není správně.

Vhodnějším řešením bude zabalit texty odstavců do tagů span, například 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>

Pro takový kód lze jednoduše nastavit událost pro editaci nikoli na celý odstavec, ale na span s textem. V tomto případě se input pro editaci objeví v tagu span a náš odkaz pro smazání zůstane neporušený.

Je dán následující HTML kód:

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

Přidejte odkaz pro smazání na konec každého odstavce.

Zařiďte, aby se při kliknutí na span v něm objevil input pro editaci.

Předpokládejme nyní, že inicialně tagy span nejsou:

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

Nejprve zabalte text odstavce do tagů span, přidejte k těmto tagům možnost editace, a poté přidejte na konec každého odstavce odkaz pro smazání.