JavaScript метод Node.removeChild()

Определение и применение

JavaScript метод .removeChild() объекта Node позволяет удалить дочерний узел из дерева DOM.

Поддержка браузерами

Спецификация: dom.spec.whatwg

✓Поддерживается во всех основных браузерах с 2015 года.

Показать браузеры

ВсеКомпьютерыМобильные

Совместимостьapi.Node.removeChild

Возможность	Компьютеры					Мобильные
	ChromeChrome	EdgeEdge	FirefoxFirefox	OperaOpera	SafariSafari	Chrome AndroidChromeAndroid	Firefox for AndroidFirefoxAndroid	Opera AndroidOperaAndroid	Safari on iOSSafariiOS	Samsung BrowserSamsungAndroid	WebView AndroidWebViewAndroid	WebView on iOSWebViewiOS
removeChild	✓1	✓12	✓1	✓7	✓1.1	✓18	✓4	✓10.1	✓1	✓1.0	✓4.4	✓1

✓поддерживается◐с ограниченияминет поддержки?нет данных≤31 — не позднее версии 31

Метод возвращает удалённый узел.

JavaScript синтаксис

// с сохранением ссылки на удаленный дочерний элемент
const oldChild = node.removeChild(child);

// без сохранения ссылки на удаленный дочерний элемент
node.removeChild(child);

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

DOM Standard.

Значения параметров

Исключения

Пример использования

Удаление и повторная вставка первого пункта

Нажмите ▶, затем Delete first child несколько раз: первый пункт удаляется методом removeChild() и сразу добавляется в конец списка, поэтому пункты циклически сдвигаются.

index.html

HTML

<button data-migration-click-0="">Delete first child</button>
<ul id="first">
  <li>1</li>
  <li>2</li>
  <li>3</li>
  <li>4</li>
  <li>5</li>
</ul>

main.js

JavaScript

const firstUl = document.getElementById('first')

function myFunc() {
    const oldChild = firstUl.removeChild(firstUl.firstElementChild) // первый дочерний элемент списка
    firstUl.appendChild(oldChild)
}

// Обработчики кнопок перенесены из HTML для запуска с CSP без inline-скриптов.
document.querySelector('[data-migration-click-0]').addEventListener('click', function () {
    myFunc()
})
document.querySelector('[data-migration-click-0]').removeAttribute('data-migration-click-0')

В этом примере с использованием метода addEventListener() при нажатии на кнопку (HTML элемент <button>) вызываем функцию myFunc(), которая с помощью метода .removeChild() удаляет первый дочерний элемент (свойство firstElementChild) внутри элемента <ul> и сохраняет ссылку на него в переменной.

После этого с помощью метода appendChild() мы добавляем удаленный узел в конец списка дочерних элементов указанного родительского узла (элемент <ul>).