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

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

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

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

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

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

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

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

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

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

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

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