Elementų redagavimas ir ištrynimas vienu metu

Tarkime, kad turime tam tikrą pastraipų rinkinį:

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

Padarykime šioms pastraipoms taip, kad būtų galima redaguoti kiekvienos pastraipos tekstą ir kad kiekvienos pastraipos pabaigoje būtų nuoroda ištrynimui.

Įgyvendinant aprašytą užduotį mūsų laukia tam tikra problema.

Norėdami suprasti problemos esmę, pažiūrėkime į HTML kodą, kuris gausis, kai prie kiekvienos pastraipos pabaigos bus pridėtos nuorodos ištrynimui:

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

Dabar įsivaizduokime, kad paspaudus bet kurią pastraipą joje atsirastų įvesties laukas redaguoti tekstą. Šiuo atveju į įvesties lauką patektų visas pastraipos tekstas - kartu su nuoroda ištrynimui!

Tai, žinoma, neteisinga.

Geresnis sprendimas būtų įklijuoti tekstus pastraipų į span žymes, štai taip:

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

Tokiam kodui galima tiesiog uždėti įvykį redagavimui ne pačiai pastraipai, o span su tekstu. Šiuo atveju įvesties laukas redagavimui atsiras span žymėje, o mūsų nuoroda ištrynimui liks neliesta.

Duotas toks HTML kodas:

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

Pridėkite nuorodą ištrynimui prie kiekvienos pastraipos pabaigos.

Padarykite taip, kad paspaudus span jame atsirastų įvesties laukas redagavimui.

Tarkime, kad iš pradžių span žymių nėra:

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

Pirmiausia įklijuokite pastraipos tekstą į span žymes, pridėkite prie šių žymių redagavimo galimybę, o tada pridėkite prie kiekvienos pastraipos pabaigos nuorodą ištrynimui.