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];
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]];
}
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];
}
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ộcNú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ạiThê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ử];
}
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];
}
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
- 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ứcremoveChild[]
. 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 - 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?
// select target target
const body = document.querySelector['body'];
// remove all child nodes
body.innerHTML = '';
// select target target
const body = document.querySelector['body'];
// remove all child nodes
body.innerHTML = '';
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