Cách Xóa Phần Tử DOM Trong JavaScript?

Trang chủ » Cách Xóa Html » Cách Xóa Phần Tử DOM Trong JavaScript?

Có thể bạn quan tâm

Cập nhật ngày 17/12/2021

Để 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:

index.html <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.
main.js // 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.
main.js // 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?

★ Nếu bạn thấy bài viết này hay thì hãy theo dõi mình trên Facebook để nhận được thông báo khi có bài viết mới nhất nhé:

  • Facebook Fanpage: Complete JavaScript
  • Facebook Group: Hỏi đáp JavaScript VN
Question Câu hỏi JS DOMCách xóa hết các phần tử con của DOM node trong JavaScript?Cách kiểm tra phần tử DOM chứa class cho trước trong JavaScript?Chia sẻ:

Bình luận

Từ khóa » Cách Xóa Html