การแก้ไขและลบองค์ประกอบพร้อมกัน

สมมติว่าเรามีชุดย่อหน้าบางส่วน:

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

สำหรับย่อหน้าเหล่านี้ มาทำให้สามารถแก้ไขข้อความของแต่ละย่อหน้าได้ และในตอนท้ายของแต่ละย่อหน้าจะมีลิงก์สำหรับลบ

เมื่อนำเสนอบทบรรยายที่อธิบายไว้ เราจะพบกับปัญหาบางอย่าง

เพื่อที่จะเข้าใจสาระสำคัญของปัญหา มาดูโค้ด HTML ที่จะได้ เมื่อเพิ่มลิงก์ลบที่ท้ายแต่ละย่อหน้า:

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

ตอนนี้ ลองจินตนาการว่าการคลิกที่ย่อหน้าใด ๆ จะปรากฏอินพุตสำหรับแก้ไขข้อความในนั้น ในกรณีนี้ ข้อความทั้งหมดของย่อหน้าจะเข้าสู่อินพุต - พร้อมกับลิงก์ลบ!

นี่แน่นอนว่าไม่ถูกต้อง

วิธีแก้ปัญหาที่ดีกว่าคือการห่อหุ้มข้อความ ของย่อหน้าในแท็ก span แบบนี้:

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

สำหรับโค้ดดังกล่าว สามารถตั้งค่าเหตุการณ์ สำหรับแก้ไขได้ง่าย ๆ ไม่ใช่ที่ย่อหน้าเอง แต่ที่ span ที่มีข้อความ ในกรณีนี้อินพุต สำหรับแก้ไขจะปรากฏในแท็ก span และลิงก์ลบของเราจะยังคงอยู่ ไม่ถูกรบกวน

นี่คือโค้ด HTML ต่อไปนี้:

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

เพิ่มลิงก์ลบที่ท้ายของแต่ละย่อหน้า

ทำให้การคลิกที่ span ปรากฏอินพุตสำหรับแก้ไขในนั้น

ตอนนี้สมมติว่าในตอนแรกไม่มีแท็ก span:

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

ก่อนอื่นให้ห่อหุ้มข้อความย่อหน้าในแท็ก span เพิ่มความสามารถในการแก้ไขให้กับแท็กเหล่านี้ จากนั้นเพิ่มลิงก์ลบที่ท้ายของแต่ละย่อหน้า