Узел: метод removeChild()

Базовая поддержка Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна во всех браузерах с июля 2015 года.

Метод removeChild() интерфейса Node удаляет дочерний узел из DOM и возвращает удалённый узел.

Примечание: Пока на удалённом дочернем узле сохраняется ссылка, он по-прежнему существует в памяти, но больше не является частью DOM. Его можно использовать повторно позже в коде.

Если значение возвращаемое removeChild() не сохранено и нет других ссылок на него, оно будет автоматически удалено из памяти через некоторое время.

В отличие от Node.cloneNode(), возвращаемое значение сохраняет связанные с ним EventListener объекты.

Синтаксис

removeChild(child)

Параметры

child: Node узел, который нужно удалить из DOM.

Исключения

NotFoundError DOMException: Выбрасывается, если child не является дочерним узлом узла.
TypeError: Выбрасывается, если child является null.

Примеры

Простые примеры

Предположим этот HTML:

<div id="parent">
  <div id="child"></div>
</div>

Чтобы удалить указанный элемент, зная его родительский узел:

const parent = document.getElementById("parent");
const child = document.getElementById("child");
const throwawayNode = parent.removeChild(child);

Чтобы удалить указанный элемент, не указывая родительский узел:

const node = document.getElementById("child");
if (node.parentNode) {
  node.parentNode.removeChild(node);
}

Чтобы удалить все дочерние элементы из элемента:

const element = document.getElementById("idOfParent");
while (element.firstChild) {
  element.removeChild(element.firstChild);
}

Возникновение TypeError

<!--Sample HTML code-->
<div id="parent"></div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

// Throws Uncaught TypeError
const garbage = parent.removeChild(child);

Возникновение NotFoundError

<!--Sample HTML code-->
<div id="parent">
  <div id="child"></div>
</div>

const parent = document.getElementById("parent");
const child = document.getElementById("child");

// This first call correctly removes the node
const garbage = parent.removeChild(child);

// Throws NotFoundError
garbage = parent.removeChild(child);

Спецификации

Спецификация
DOM # dom-node-removechild

Совместимость с браузерами

	Рабочие столы					Мобильные устройства
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на iOS	Samsung Internet	WebView Android
`removeChild`	1	12	1	7	1.1	18	4	10.1	1	1.0	4.4

См. также

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/Node/removeChild