Hướng dẫn đơn giản để tìm hiểu cách xóa một phần tử HTML khỏi cây DOM bằng cách sử dụng JavaScript vani.

Bạn đang xem : javascript dom loại bỏ phần tử

Cách xóa một phần tử khỏi DOM trong JavaScript

Ngày 11 tháng 3 năm 2020

Atta

Tuần trước, chúng ta đã xem xét cách tạo một phần tử mới và chèn nó vào DOM bằng cách sử dụng JavaScript đơn giản. Hôm nay, chúng ta hãy xem cách xóa các phần tử khỏi DOM bằng JavaScript.

Có hai cách để xóa một phần tử khỏi DOM trong JavaScript. Bạn có thể ẩn phần tử bằng cách sử dụng các kiểu nội tuyến hoặc xóa hoàn toàn phần tử đó.

Để ẩn phần tử khỏi DOM trong JavaScript, bạn có thể sử dụng thuộc tính DOM style :

 

const

elem

=

document

.

querySelector

(

'# gợi ý'

) < / p>

;

elem

.

style

.

display

=

'không có'

;

Như bạn có thể thấy ở trên, chúng tôi vừa thay đổi kiểu hiển thị của phần tử thành none với sự trợ giúp của thuộc tính style . Cách tiếp cận này rất hữu ích nếu bạn tạm thời muốn ẩn phần tử khỏi DOM và muốn khôi phục phần tử đó vào một thời điểm nào đó dựa trên các tương tác của người dùng.

Ngoài ra, nếu bạn muốn xóa hoàn toàn phần tử khỏi DOM, bạn có thể sử dụng thuộc tính removeChild () :

 

const

elem

=

document

.

querySelector

(

'# gợi ý'

) < / p>

;

elem

.

parentNode

.

removeChild

(

elem

)

;

Phương thức removeChild () xóa nút con đã cho của phần tử được chỉ định. Nó trả về nút đã loại bỏ dưới dạng đối tượng Node hoặc null nếu nút không tồn tại. Nó hoạt động trên tất cả các trình duyệt hiện đại và cũ, bao gồm cả Internet Explorer.

ES6 remove () Phương thức

Phương thức removeChild () hoạt động hiệu quả để xóa một phần tử, nhưng bạn chỉ có thể gọi nó trên parentNode của phần tử bạn muốn xóa.

Phương pháp hiện đại để xóa một phần tử là sử dụng phương thức remove () . Chỉ cần gọi phương thức này trên phần tử bạn muốn xóa khỏi DOM, như bên dưới:

 

const

elem

=

document

.

querySelector

(

'# gợi ý'

) < / p>

;

elem

.

xóa

(

)

;

Phương pháp này đã được giới thiệu trong ES6 và hiện tại, chỉ hoạt động trong các trình duyệt hiện đại. Tuy nhiên, bạn có thể sử dụng polyfill để làm cho nó tương thích với Internet Explorer 9 trở lên .

✌️ Thích bài viết này? Theo dõi tôi trên
Twitter
LinkedIn .
Bạn cũng có thể đăng ký
Nguồn cấp dữ liệu RSS .


Xem thêm những thông tin liên quan đến chủ đề javascript dom loại bỏ phần tử

Learn DOM Manipulation In 18 Minutes

  • Tác giả: Web Dev Simplified
  • Ngày đăng: 2020-12-08
  • Đánh giá: 4 ⭐ ( 3746 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: 🚨 IMPORTANT:

    JavaScript Simplified Course: https://javascriptsimplified.com

    DOM manipulation is tough. There are lots of methods and techniques you need to master and it is not obvious which methods are best for each scenario. In this video I cover the 14 most important DOM manipulation methods that you need to know.

    📚 Materials/References:

    DOM Traversal Methods Video: https://youtu.be/v7rSSy8CaYE
    innerHTML Cross Site Scripting Video: https://youtu.be/ns1LX6mEvyM
    Data Attributes Blog Article: https://blog.webdevsimplified.com/2020-10/javascript-data-attributes
    classList Blog Article: https://blog.webdevsimplified.com/2020-11/class-list

    🧠 Concepts Covered:

    – Creating elements
    – Adding elements
    – Modifying data attributes
    – Removing elements

    🌎 Find Me Here:

    My Blog: https://blog.webdevsimplified.com
    My Courses: https://courses.webdevsimplified.com
    Patreon: https://www.patreon.com/WebDevSimplified
    Twitter: https://twitter.com/DevSimplified
    Discord: https://discord.gg/7StTjnR
    GitHub: https://github.com/WebDevSimplified
    CodePen: https://codepen.io/WebDevSimplified

    ⏱️ Timestamps:

    00:00 – Introduction
    01:01 – Adding Elements
    02:58 – Creating Elements
    04:04 – Modifying Element Text
    07:30 – Modifying Element HTML
    10:22 – Removing Elements
    11:54 – Modifying Element Attributes
    14:11 – Modifying Data Attributes
    16:13 – Modifying Element Classes
    17:40 – Modifying Element Style

    DOMManipulation WDS JavaScript

Tạo mới thêm xóa phần tử Dom – JavaScript

  • Tác giả: xuanthulab.net
  • Đánh giá: 5 ⭐ ( 1543 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo ra một nút phần tử HTML trong DOM, chèn phần tử HTML, xóa phần tử và thay thế phần tử trong DOM HTML

Xóa phần tử trong Array JavaScript

  • Tác giả: viblo.asia
  • Đánh giá: 4 ⭐ ( 1222 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Xóa phần tử trong Array JavaScript là một bài toán mà hầu hết mọi người đều gặp phải khi lập trình JavaScript. Để giải quyết bài toán này, JavaScript cung cấp rất nhiều giải pháp khác nhau. Mỗi giải…

9+ cách để xóa một phần tử ra khỏi JavaScript Array

  • Tác giả: topdev.vn
  • Đánh giá: 5 ⭐ ( 2414 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: JavaScript Array cho phép bạn nhóm các giá trị và lặp lại chúng. Bạn có thể thêm và loại bỏ các phần tử mảng theo những cách khác nhau.

Cách xóa tất cả phần tử con khỏi phần tử DOM

  • Tác giả: tech-wiki.online
  • Đánh giá: 5 ⭐ ( 8666 lượt đánh giá )
  • Khớp với kết quả tìm kiếm:

Một số cách để xóa phần tử trong mảng JavaScript

  • Tác giả: timviecit.net
  • Đánh giá: 5 ⭐ ( 4071 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Mảng JavaScript cho phép người dùng nhóm các giá trị và lặp lại chúng. Bạn có thể thêm hoặc loại bỏ các phần tử mảng theo những cách khác nhau. Vậy làm sao để bạn xóa phần tử trong mảng JavaScript?

Tạo mới thêm xóa phần tử Dom – JavaScript

  • Tác giả: theonamthang.com
  • Đánh giá: 4 ⭐ ( 1570 lượt đánh giá )
  • Khớp với kết quả tìm kiếm: Tạo mới thêm xóa phần tử Dom – JavaScript

Xem thêm các bài viết khác thuộc chuyên mục: Kiến thức lập trình

Xem Thêm  Tìm hiểu SQL: Khóa ngoại - cách xác định khóa ngoại trong sql

By ads_php