Phần tử DOM HTML loại bỏChild()
Ví dụ
Xóa phần tử đầu tiên khỏi danh sách:
const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);
Trước:
- Cà phê
- Trà
- Sữa
Sau đó:
- Trà
- Sữa
Nếu danh sách có các nút con, hãy xóa nút đầu tiên (chỉ mục 0):
const list = document.getElementById("myList");
if (list.hasChildNodes()) {
list.removeChild(list.children[0]);
}
Hãy tự mình thử »Xóa tất cả các nút con khỏi danh sách:
const list = document.getElementById("myList");
while (list.hasChildNodes()) {
list.removeChild(list.firstChild);
}
Hãy tự mình thử »Thêm ví dụ dưới đây.
Sự miêu tả
Phương thức removeChild()
loại bỏ phần tử con của một phần tử.
Ghi chú
Đứa trẻ bị xóa khỏi Mô hình đối tượng tài liệu (DOM).
Tuy nhiên, nút được trả về có thể được sửa đổi và chèn lại vào DOM (Xem phần "Ví dụ khác").
Xem thêm:
Cú pháp
element .removeChild( node )
hoặc
node .removeChild( node )
Thông số
Parameter | Description |
node | Required. The node (element) to remove. |
Giá trị trả về
Kiểu | Sự miêu tả |
Nút | Nút (phần tử) bị loại bỏ.null nếu đứa trẻ không tồn tại. |
Thêm ví dụ
Ví dụ
Xóa một phần tử khỏi phần tử mẹ của nó và chèn lại phần tử đó:
const element = document.getElementById("myLI");
function removeLi() {
element.parentNode.removeChild(element);
}
function appendLi() {
const list = document.getElementById("myList");
list.appendChild(element);
}
Hãy tự mình thử »Ghi chú
Sử dụngappendChild () hoặc InsertBefore() để chèn một nút đã loại bỏ vào cùng một tài liệu.
Sử dụng document.adoptNode() hoặc document.importNode() để chèn nó vào tài liệu khác.
Ví dụ
Xóa một phần tử khỏi phần tử mẹ của nó và chèn nó vào một tài liệu khác:
const child = document.getElementById("mySpan");
function remove() {
child.parentNode.removeChild(child);
}
function insert() {
const frame = document.getElementsByTagName("IFRAME")[0]
const h = frame.contentWindow.document.getElementsByTagName("H1")[0];
const x = document.adoptNode(child);
h.appendChild(x);
}
Hãy 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:
Chrome | Edge | Firefox | Safari | Opera | IE |
Yes | Yes | Yes | Yes | Yes | 9-11 |