JavaScript метод Node.removeChild()

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

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

Обратите внимание, что удаленный дочерний узел все еще существует в памяти, но больше не является частью DOM. Удаленный узел можно повторно использовать позже в коде в том случае, если ссылка на него была сохранена в переменной, иначе узел автоматически удаляется из памяти через короткое время.

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

Метод	Chrome	Firefox	Opera	Safari	IExplorer	Edge
`Node.removeChild()`	Да	Да	Да	Да	Да	Да

JavaScript синтаксис:

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

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

oldСhild - Node (содержит ссылку на удаленный дочерний узел oldChild === child)
node - Node (родительский элемент из которого удаляется дочерний узел)
child - Node

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

Document Object Model (DOM) Level 1

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

Параметр	Описание
child	Дочерний узел, который будет удален из дерева DOM. Обязательный аргумент.

Исключения

Тип исключения	Описание
NotFoundError	Возникает в том случае, если дочерний элемент был в дереве DOM, но был удален к моменту вызова метода.
TypeError	Возникает в том случае, если дочерний элемент не существует в DOM.

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

<!DOCTYPE html>
<html>
	<head>
		<title>Использование JavaScript метода .removeChild()</title>
	</head>
	<body>
		<button onclick = "myFunc()">referenceNode = li</button> <!-- добавляем атрибут событий onclick -->
		<ul id = "first"><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li></ul>
		<script>
	const firstUl = document.getElementById("first"); // находим элемет по id 

	function myFunc() {
	  const oldChild =  firstUl.removeChild( firstUl.firstChild ); // удаляем узел и сохраняем ссылку на него в переменной
	  firstUl.appendChild( oldChild ); // вставляем созданный узел в конец списка дочерних узлов родительского узла
	}
		</script>
	</body>
</html>

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

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

Результат нашего примера:

Пример использования JavaScript метода .removeChild()

JavaScript Node