Gelyktydige redigering en verwydering van elemente

Kom ons sê ons het 'n versameling paragrawe:

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

Laat ons vir hierdie paragrawe maak sodat die teks van elke paragraaf geredigeer kan word en terselfdertyd aan die einde van elke paragraaf is daar 'n skakel om dit te verwyder.

Met die implementering van die beskryfde taak wag daar 'n sekere probleem op ons.

Om die kern van die probleem te verstaan, laat ons kyk na die HTML-kode wat sal ontstaan wanneer 'n verwyder-skakel aan die einde van elke paragraaf bygevoeg word:

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

Stel jou nou voor dat met 'n klik op enige paragraaf, 'n invoerveld vir redigering van die teks daarin sal verskyn. In hierdie geval sal die hele teks van die paragraaf - saam met die verwyder-skakel! - in die invoerveld beland.

Dit is natuurlik nie korrek nie.

'n Beter oplossing sal wees om die teks van die paragrawe in span-etikette in te sluit, soos volg:

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

Vir so 'n kode kan ons eenvoudig 'n gebeurtenis vir redigering nie op die paragraaf self aanbring nie, maar op die span met die teks. In hierdie geval sal die invoerveld vir redigering binne die span-etiket verskyn, en ons verwyder-skakel sal onaangeraak bly.

Die volgende HTML-kode word gegee:

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

Voeg 'n verwyder-skakel aan die einde van elke paragraaf by.

Sorg dat met 'n klik op die span 'n invoerveld vir redigering daarin verskyn.

Kom ons sê daar is aanvanklik geen span-etikette nie:

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

Sluit eers die paragraafteks in span-etikette in, voeg die moontlikheid tot redigering vir hierdie etikette by, en voeg dan 'n verwyder-skakel aan die einde van elke paragraaf by.