Làm cách nào để xóa tất cả JavaScript con?

ví dụ

Xóa phần tử đầu tiên khỏi danh sách

danh sách const = tài liệu. getElementById("myList");
danh sách. removeChild(danh sách. firstElementChild);

Tự mình thử »

Nếu một danh sách có các nút con, hãy xóa nút đầu tiên (chỉ mục 0)

danh sách const = tài liệu. getElementById("myList");

nếu (danh sách. hasChildNodes()) {
danh sách. removeChild(danh sách. trẻ em [0]);
}

Tự mình thử »

Xóa tất cả các nút con khỏi danh sách

danh sách const = tài liệu. getElementById("myList");

trong khi (danh sách. hasChildNodes()) {
danh sách. removeChild(danh sách. firstChild);
}

Tự mình thử »

Thêm ví dụ bên dưới

---

Định nghĩa và cách sử dụng

Phương thức removeChild() loại bỏ phần tử con

---

cú pháp

yếu tố. removeChild(nút)

hoặc là

Thông số

Tham sốMô tảnútBắt buộc
Nút (phần tử) cần xóa

Giá trị trả về

TypeDescriptionNodeNút đã loại bỏ (phần tử)
null nếu đứa trẻ không tồn tại

---

---

Thêm ví dụ

Xóa một phần tử khỏi nút cha của nó

yếu tố. cha mẹNode. removeChild(phần tử);

Tự mình thử »

Thí dụ

Xóa một phần tử khỏi phần tử gốc của nó và chèn lại phần tử đó

phần tử const = tài liệu. getElementById("myLI");

hàm removeLi() {
yếu tố. cha mẹNode. removeChild(phần tử);
}
hàm appendLi() {
danh sách const = tài liệu. getElementById("myList");
danh sách. appendChild(phần tử);
}

Tự mình thử »

Thí dụ

Loại bỏ một phần tử khỏi cha của nó và chèn nó vào một tài liệu khác

const con = tài liệu. getElementById("mySpan");

chức năng loại bỏ() {
trẻ em. cha mẹNode. removeChild(con);
}

chèn hàm() {
khung const = tài liệu. getElementsByTagName("IFRAME")[0]
const h = khung. nội dungWindow. tài liệu. getElementsByTagName("H1")[0];
const x = tài liệu. con nuôiNode(con);
h. appendChild(x);
}

Tự mình thử »

---

Hỗ trợ trình duyệt

element.removeChild() là tính năng DOM Cấp 1 (1998)

Nó được hỗ trợ đầy đủ trong tất cả các trình duyệt

ChromeEdgeFirefoxSafariOperaIECóCóCóCóCó9-11

---

Để xóa tất cả các nút con của một phần tử, bạn có thể sử dụng phương thức removeChild() của phần tử đó cùng với thuộc tính lastChild

Phương thức removeChild() xóa nút đã cho khỏi phần tử đã chỉ định. Nó trả về nút bị xóa dưới dạng đối tượng Node hoặc null nếu nút không còn nữa

Đây là một đoạn mã ví dụ

const removeChilds = (parent) => {
    while (parent.lastChild) {
        parent.removeChild(parent.lastChild);
    }
};

// select target target 
const body = document.querySelector('body');

// remove all child nodes
removeChilds(body);

Phương pháp removeChilds() thực hiện như sau

1. Chọn nút con cuối cùng bằng cách sử dụng thuộc tính lastChild và loại bỏ nó bằng cách sử dụng phương thức removeChild(). Khi nút con cuối cùng bị xóa, nút cuối cùng thứ hai sẽ tự động trở thành nút con cuối cùng
2. Lặp lại bước đầu tiên cho đến khi không còn nút con nào

Nút con bị loại bỏ được trả về bởi phương thức removeChild() không còn là một phần của DOM. Tuy nhiên, bạn có thể chèn nó trở lại DOM nếu cần

Còn về // select target target const body = document.querySelector('body'); // remove all child nodes body.innerHTML = ''; 2 và // select target target const body = document.querySelector('body'); // remove all child nodes body.innerHTML = ''; 3 thì sao?

Bạn cũng có thể sử dụng thuộc tính innerHTML để xóa tất cả các nút con

// select target target 
const body = document.querySelector('body');

// remove all child nodes
body.innerHTML = '';

Cách tiếp cận này đơn giản, nhưng nó có thể không phải là lựa chọn phù hợp cho các ứng dụng hiệu suất cao vì nó gọi trình phân tích cú pháp HTML của trình duyệt để phân tích cú pháp chuỗi mới và cập nhật DOM

Nếu bạn không muốn gọi trình phân tích cú pháp HTML, hãy sử dụng thuộc tính textContent để thay thế

body.textContent = '';

Theo MDN, thuộc tính

// select target target 
const body = document.querySelector('body');

// remove all child nodes
body.innerHTML = '';

3 hoạt động tốt hơn

// select target target 
const body = document.querySelector('body');

// remove all child nodes
body.innerHTML = '';

2 vì trình duyệt không phải gọi trình phân tích cú pháp HTML và có thể ngay lập tức thay thế tất cả các nút con của phần tử bằng một nút văn bản

Phương thức removeChild() trong JavaScript là gì?

Làm cách nào để xóa con được nối thêm trong JavaScript?

Làm cách nào để xóa tất cả phần tử trong JavaScript?

Làm cách nào để xóa con cuối cùng trong JavaScript?