Edit dan Hapus Elemen Secara Bersamaan

Misalkan kita memiliki serangkaian paragraf:

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

Mari kita buat untuk paragraf-paragraf ini sehingga teks setiap paragraf dapat diedit dan di akhir setiap paragraf terdapat tautan untuk menghapus.

Dalam mengimplementasikan tugas yang dijelaskan, kita akan menghadapi masalah tertentu.

Untuk memahami inti masalahnya, mari lihat kode HTML yang akan dihasilkan, ketika tautan hapus ditambahkan ke akhir setiap paragraf:

<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, jika klik pada paragraf mana pun, input untuk mengedit teks akan muncul di dalamnya. Dalam hal ini, input akan berisi seluruh teks paragraf - bersama dengan tautan hapus!

Tentu saja, ini tidak benar.

Solusi yang lebih baik adalah membungkus teks paragraf 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 kode seperti ini, kita bisa dengan mudah menambahkan event untuk mengedit bukan pada paragraf itu sendiri, tetapi pada span yang berisi teks. Dalam hal ini, input untuk mengedit akan muncul di dalam tag span, dan tautan hapus kita akan tetap utuh.

Diberikan kode HTML berikut:

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

Tambahkan tautan hapus di akhir setiap paragraf.

Buat agar ketika mengklik span muncul input untuk mengedit di dalamnya.

Sekarang misalkan awalnya tidak ada tag span:

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

Bungkus dulu teks paragraf dalam tag span, tambahkan kemampuan mengedit ke tag-tag ini, kemudian tambahkan tautan hapus di akhir setiap paragraf.