Cách xóa phần tử DOM trong JavaScript?

Để xóa phần tử DOM trong JavaScript, bạn có thể sử dụng phương thức remove() hoặc removeChild().

Ví dụ DOM như sau:

<div id="toRemove">
  Thẻ div này cần được xóa
</div>

Sử dụng phương thức remove()

Các bước để xóa phần tử DOM với phương thức remove() như sau:

• Dùng document.querySelector("#toRemove") để tìm phần tử cần xóa.
• Sử dụng toRemove.remove() để xóa phần tử toRemove.

// query để tìm DOM cần xóa
let toRemove = document.querySelector("#toRemove");

// gọi remove để xóa phần tử DOM
toRemove.remove();

Sử dụng phương thức removeChild()

Các bước để xóa phần tử DOM với phương thức removeChild() như sau:

• Dùng document.querySelector("#toRemove") để tìm phần tử cần xóa.
• Sử dụng toRemove.parentNode.removeChild(toRemove) để xóa phần tử toRemove.

// query để tìm DOM cần xóa
let toRemove = document.querySelector("#toRemove");

// gọi parentNode.removeChild để xóa phần tử DOM
toRemove.parentNode.removeChild(toRemove);

Tham khảo:

• DOM là gì?
• How to remove an HTML element using JavaScript?