ลิงก์สำหรับลบองค์ประกอบด้วย JavaScript

สมมติว่าเรามีย่อหน้า ลองสร้างลิงก์ไว้ข้างๆ ย่อหน้านั้น ซึ่งสามารถใช้ลบย่อหน้านี้ได้

มาเริ่มทำกัน:

<div id="parent">
	<p id="elem">text</p>
	<a href="#" id="remove">remove</a>
</div>

let elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function() {
	elem.remove();
});

โปรดสังเกตว่าในแอตทริบิวต์ href ของลิงก์มีเครื่องหมาย # อยู่ หากเอาเครื่องหมาย # ออก - เราจะได้การนำทางผ่านลิงก์ และส่งผลให้ หน้าเว็บรีเฟรช

จริงๆ แล้วการลบย่อหน้าจะ เกิดขึ้นด้วย แต่เราจะไม่ทันสังเกตเห็น เพราะ หน้าเว็บรีเฟรชและทุกอย่างจะกลับสู่สถานะเดิม

ในการแก้ปัญหา จำเป็นต้องป้องกัน การนำทางผ่านลิงก์โดยใช้ preventDefault:

<div id="parent">
	<p id="elem">text</p>
	<a href="" id="remove">remove</a>
</div>

let elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // ยกเลิกการนำทางผ่านลิงก์
});

ลองทำโจทย์ที่กล่าวมาเอง โดยไม่แอบดูโค้ดของฉัน