Elementu rediģēšana un dzēšana vienlaicīgi

Pieņemsim, ka mums ir noteikta rindkopu kopums:

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

Ļaujiet šīm rindkopām izveidot tā, lai varētu rediģēt katras rindkopas tekstu un tajā pašā laikā katras rindkopas beigās atrastos saites uz dzēšanu.

Izpildot aprakstīto uzdevumu, mūs sagaida noteikta problēma.

Lai saprastu problēmas būtību, apskatīsim HTML kodu, kas tiks iegūts, kad katrai rindkopai beigās tiks pievienotas saites uz dzēšanu:

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

Tagad iedomājieties, ka, noklikšķinot uz jebkuras rindkopas, tajā parādīsies ievades lauks rediģēšanai. Šajā gadījumā ievades laukā nonāks visa rindkopas teksts - kopā ar saiti uz dzēšanu!

Tas, protams, nav pareizi.

Veiksmīgāks risinājums būtu ietekt rindkopu tekstus span tagos, šādi:

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

Šādam kodam var vienkārši pievienot notikumu rediģēšanai nevis pašai rindkopai, bet gan span ar tekstu. Šajā gadījumā ievades lauks rediģēšanai parādīsies span tagā, un mūsu saite dzēšanai paliks nepieskarta.

Dots šāds HTML kods:

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

Pievienojiet saiti uz dzēšanu katrai rindkopai beigās.

Iestatiet tā, lai, noklikšķinot uz span, tajā parādītos ievades lauks rediģēšanai.

Pieņemsim, ka sākotnēji span tagu nav:

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

Vispirms ietekojiet rindkopas tekstu span tagos, pievienojiet šiem tagiem iespēju rediģēt, un pēc tam pievienojiet katrai rindkopai beigās saiti uz dzēšanu.