Phương thức removeChild() của HTML DOM Element

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

removeChild() Phương thức này xóa các phần tử con của phần tử.

Phương thức này trả về đối tượng Node của phần tử bị xóa; nếu phần tử không tồn tại, thì trả về null.

Lưu ý

Các phần tử con được xóa khỏi Document Object Model (DOM).

Nhưng, có thể thay đổi phần tử trả về và chèn lại vào DOM (xem ví dụ dưới đây).

Xin xem thêm:

Phương thức remove()

Phương thức appendChild()

Phương thức insertBefore()

Phương thức replaceChild()

Thuộc tính childNodes

Thuộc tính firstChild

Thuộc tính lastChild

Thuộc tính firstElementChild

Thuộc tính lastElementChild

Mô hình

Ví dụ 1

Xóa phần tử đầu tiên trong danh sách:

const list = document.getElementById("myList");
list.removeChild(list.firstElementChild);

Trước khi xóa:

  • Coffee
  • Tea
  • Milk

Sau khi xóa:

  • Tea
  • Milk

Thử ngay

Ví dụ 2

Nếu danh sách có phần tử con, thì xóa phần tử đầu tiên (tên mục 0):

const list = document.getElementById("myList");
if (list.hasChildNodes()) {
  list.removeChild(list.children[0]);
}

Thử ngay

Ví dụ 3

Xóa tất cả các phần tử con trong danh sách:

const list = document.getElementById("myList");
while (list.hasChildNodes()) {
  list.removeChild(list.firstChild);
}

Thử ngay

Ví dụ 4

Xóa một phần tử từ phần tử cha:

element.parentNode.removeChild(element);

Thử ngay

Ví dụ 5

Từ phần tử cha của nó xóa một phần tử, sau đó chèn lại:

const element = document.getElementById("myLI");
function removeLi() {
  element.parentNode.removeChild(element);
}
function appendLi() {
  const list = document.getElementById("myList");
  list.appendChild(element);
}

Thử ngay

Ví dụ 6: Cảnh báo

Vui lòng sử dụng appendChild() hoặc insertBefore() để chèn nút bị xóa vào cùng một tài liệu.

Bạn có thể sử dụng document.adoptNode() hoặc document.importNode() để chèn vào một tài liệu khác.

Ví dụ sau này xóa một element từ phần tử cha của nó và chè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);
}

Thử ngay

Cú pháp

element.removeChild(node)

hoặc

node.removeChild(node)

Tham số

Tham số Mô tả
node Bắt buộc. Nút (element) cần xóa.

Giá trị trả về

Loại Mô tả
Node

Nút (element) bị xóa.

Nếu không có nút con, thì sẽ là null.

Hỗ trợ trình duyệt

element.removeChild() Là tính năng DOM Level 1 (1998).

Tất cả các trình duyệt đều hỗ trợ hoàn toàn nó:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Hỗ trợ 9-11 Hỗ trợ Hỗ trợ Hỗ trợ Hỗ trợ