Samtidig redigering og sletning af elementer

Lad os sige, at vi har et vist sæt af afsnit:

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

Lad os for disse afsnit gøre det sådan, at man kan redigere teksten i hvert afsnit og samtidig have et sletningslink i slutningen af hvert afsnit.

Ved implementeringen af den beskrevne opgave støder vi på et problem.

For at forstå problemets essens, lad os se på HTML-koden, der resulterer, når sletningslinks tilføjes i slutningen af hvert afsnit:

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

Forestil dig nu, at ved at klikke på ethvert afsnit vil der dukke et inputfelt op til redigering af teksten. I dette tilfælde vil hele afsnittets tekst blive placeret i inputfeltet - inklusive sletningslinket!

Det er selvfølgelig ikke korrekt.

En bedre løsning ville være at indkapsle teksterne i afsnitene i span-tags, sådan her:

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

For sådan en kode kan man simpelthen tilføje en hændelse for redigering ikke til selve afsnittet, men til span med teksten. I dette tilfælde vil inputfeltet for redigering dukke op i span-tagget, og vores sletningslink forbliver uberørt.

Følgende HTML-kode er givet:

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

Tilføj et sletningslink i slutningen af hvert afsnit.

Gør det sådan, at ved at klikke på span vil der dukke et inputfelt til redigering op i det.

Lad os nu sige, at der oprindeligt ikke er nogen span-tags:

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

Indkapsl først afsnitsteksten i span-tags, tilføj redigeringsmulighed til disse tags, og tilføj derefter et sletningslink i slutningen af hvert afsnit.