Pengeditan dan Pemadaman Elemen Serentak

Katakan kita mempunyai satu set perenggan:

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

Mari kita buat untuk perenggan ini supaya teks setiap perenggan boleh diedit dan pada masa yang sama di hujung setiap perenggan terdapat pautan untuk memadam.

Apabila melaksanakan tugas yang diterangkan, kita akan menghadapi beberapa masalah.

Untuk memahami inti pati masalah, mari kita lihat pada kod HTML yang akan terhasil, apabila pautan padaman ditambahkan ke hujung setiap perenggan:

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

Sekarang bayangkan, apabila mana-mana perenggan diklik, input untuk pengeditan teks akan muncul di dalamnya. Dalam kes ini, keseluruhan teks perenggan akan dimasukkan ke dalam input - bersama-sama dengan pautan padaman!

Ini, sudah tentu, tidak betul.

Penyelesaian yang lebih baik ialah membungkus teks perenggan dalam tag span, seperti ini:

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

Untuk kod sedemikian, kita boleh dengan mudah meletakkan event untuk pengeditan bukan pada perenggan itu sendiri, tetapi pada span dengan teks. Dalam kes ini, input untuk pengeditan akan muncul dalam tag span, dan pautan padaman kami akan kekal tidak terganggu.

Diberi kod HTML berikut:

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

Tambahkan pautan padaman di hujung setiap perenggan.

Buat supaya apabila span diklik, input untuk pengeditan muncul di dalamnya.

Katakan sekarang tiada tag span pada mulanya:

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

Pertama, bungkus teks perenggan dalam tag span, tambahkan keupayaan pengeditan kepada tag ini, dan kemudian tambahkan pautan padaman di hujung setiap perenggan.