programming javascript

Làm cách nào để xóa div bằng JavaScript?

Tóm lược. trong hướng dẫn này, bạn sẽ học cách xóa một phần tử khỏi DOM bằng phương pháp removeChild[] và remove[]

Xóa phần tử bằng phương thức removeChild[]

Để xóa một phần tử khỏi DOM, bạn làm theo các bước sau

Đầu tiên, chọn phần tử mục tiêu mà bạn muốn xóa bằng các phương thức DOM, chẳng hạn như querySelector[]
Sau đó, chọn phần tử cha của phần tử đích và sử dụng phương thức removeChild[]

Giả sử rằng bạn có tài liệu HTML sau




    
        
        
        Removing a element
    

    
        
            Home
            Service
            About
        
        
            // select the target element
            const e = document.querySelector["li:last-child"];
            // remove the last list item
            e.parentElement.removeChild[e];
        

    

Code language: HTML, XML [xml]

Làm thế nào nó hoạt động

Đầu tiên, chọn mục danh sách cuối cùng bằng phương pháp querySelector[]
Sau đó, chọn phần tử cha của mục danh sách bằng cách sử dụng phương thức parentElement và gọi phương thức removeChild[] trên phần tử cha để xóa mục danh sách cuối cùng

Lưu ý rằng nếu bạn chỉ muốn ẩn phần tử, bạn có thể sử dụng đối tượng

const e = document.querySelector['li:last-child'];
e.style.display = 'none';

  
Code language: JavaScript [javascript]

const e = document.querySelector['li:last-child'];
e.style.display = 'none';
Code language: JavaScript [javascript]

Xóa phần tử bằng phương thức remove[]

Để xóa một phần tử khỏi DOM, bạn cũng có thể sử dụng phương thức remove[] của phần tử đó

Tất cả các trình duyệt chính đều hỗ trợ phương thức remove[] ngoại trừ IE. Vì IE không được dùng nữa, bạn có thể sử dụng phương thức remove[] ngay hôm nay. Ví dụ

Bạn có thể sử dụng chuỗi tùy chọn [?. ] để tránh gặp lỗi nếu phần tử không tồn tại

const element = document.getElementById['box'];

element?.remove[];

Nếu biến

const element = document.getElementById['box'];

element.remove[];

5 lưu trữ giá trị

const element = document.getElementById['box'];

element.remove[];

4 hoặc

const element = document.getElementById['box'];

element.remove[];

7, thì toán tử chuỗi tùy chọn sẽ đoản mạch thay vì gọi phương thức remove[]

Bước cuối cùng là sử dụng Element. remove[] để xóa phần tử khỏi DOM

Lưu ý rằng việc xóa một phần tử cũng sẽ xóa các phần tử con của nó

Xóa phần tử DOM theo ID mà không xóa phần tử con của nó

Nếu bạn cần xóa phần tử mà không xóa phần tử con của nó, hãy sử dụng phương pháp này để thay thế

Và đây là mã JavaScript liên quan

const element = document.getElementById['parent'];

element.replaceWith[...element.childNodes];

Để xóa một phần tử mà không xóa phần tử con của nó, về cơ bản, chúng ta thay thế phần tử đó bằng phần tử con của nó

Đoạn mã trong ví dụ chỉ loại bỏ phần tử

const element = document.getElementById['box'];

element.remove[];

9 với id của

const element = document.getElementById['box'];

element?.remove[];

1, mà không loại bỏ phần tử

const element = document.getElementById['box'];

element?.remove[];

2 nằm bên trong của

const element = document.getElementById['box'];

element.remove[];

Nếu bạn cần xử lý tình huống trong đó phần tử không tồn tại, hãy sử dụng toán tử xâu chuỗi tùy chọn [?. ]