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

Posted on by mtoplistChuyên mục:Top List

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

 

let
 toRemove 
=
 document
.
querySelector
(
"#toRemove"
)
;


 
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

 

let
 toRemove 
=
 document
.
querySelector
(
"#toRemove"
)
;


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

Chia sẻ:

mtoplist