Метод removeChild() элемента HTML DOM

Определение и использование

removeChild() Этот метод удаляет подузлы элемента.

Этот метод возвращает удаленный узел в виде объекта Node; если узел не существует, то возвращает null.

Совет

Дочерние узлы удаляются из документной объектной модели (DOM).

Но можно изменить возвращаемый узел и вставить его обратно в DOM (см. примеры ниже).

См. также:

remove() метод

appendChild() метод

insertBefore() метод

replaceChild() метод

childNodes свойство

firstChild свойство

lastChild свойство

firstElementChild свойство

lastElementChild свойство

Пример

Пример 1

Удалите первый элемент из списка:

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

До удаления:

  • Кофе
  • Чай
  • Молоко

После удаления:

  • Чай
  • Молоко

Попробуйте сами

Пример 2

Если список имеет подузлы, удалите первый (индекс 0):

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

Попробуйте сами

Пример 3

Удалите все подузлы из списка:

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

Попробуйте сами

Пример 4

Удалите элемент из его родительского узла:

element.parentNode.removeChild(element);

Попробуйте сами

Пример 5

Удалите элемент из его родительского элемента, а затем вставьте его обратно:

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

Попробуйте сами

Пример 6: Подсказка

Используйте appendChild() или insertBefore(), чтобы вставить удаленный узел в тот же документ.

Его можно вставить в другой документ с помощью document.adoptNode() или document.importNode().

В следующем примере элемент удаляется из родительского элемента и вставляется в другой документ:

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);
}

Попробуйте сами

Синтаксис

element.removeChild(node)

или

node.removeChild(node)

Параметр

Параметр Описание
node Обязателен. Узел (элемент), который нужно удалить.

Возвратное значение

Тип Описание
Node

Удаленный узел (элемент).

Если подузел не существует,则为 null.

Поддержка браузеров

element.removeChild() Это функция DOM Level 1 (1998).

Все браузеры поддерживают его полностью:

Chrome IE Edge Firefox Safari Opera
Chrome IE Edge Firefox Safari Opera
Поддержка 9-11 Поддержка Поддержка Поддержка Поддержка