В этом руководстве вы узнаете, как использовать метод JavaScript removeChild() для удаления дочернего узла из родительского узла.
Чтобы удалить дочерний элемент узла, используйте метод removeChild() :
let childNode = parentNode.removeChild(childNode);
childNode — это дочерний узел parentNode, который вы хотите удалить. Если childNode не является дочерним узлом parentNode, метод выдает исключение.
Метод removeChild() возвращает удаленный дочерний узел из дерева DOM, но сохраняет его в памяти, которую можно использовать позже.
Если вы не хотите оставлять удаленный дочерний узел в памяти, используйте следующий синтаксис:
parentNode.removeChild(childNode);
Дочерний узел будет находиться в памяти до тех пор, пока он не будет уничтожен сборщиком мусора JavaScript.
Пример
Предположим, у вас есть следующий список элементов:
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
</ul>
В следующем примере метод removeChild() используется для удаления последнего элемента списка:
let menu = document.getElementById('menu');
menu.removeChild(menu.lastElementChild);
Как это работает:
- Во-первых, получите элемент
ulсmenuid, используя методgetElementById(). - Затем удалите последний элемент элемента
ulс помощьюremoveChild(). Свойствоmenu.lastElementChildвозвращает последний дочерний элементmenu.
Соединим все это вместе.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>JavaScript removeChild()</title>
</head>
<body>
<ul id="menu">
<li>Home</li>
<li>Products</li>
<li>About Us</li>
</ul>
<script>
let menu = document.getElementById('menu');
menu.removeChild(menu.lastElementChild);
</script>
</body>
</html>Удаление всех дочерних узлов элемента
Чтобы удалить все дочерние узлы элемента, выполните следующие действия:
- Получите первый узел элемента, используя свойство
firstChild. - Повторно удалите дочерний узел до тех пор, пока не останется дочерних узлов.
Следующий код показывает, как удалить все элементы списка элемента menu :
let menu = document.getElementById('menu');
while(menu.firstChild) {
menu.removeChild(menu.firstChild);
}Вы можете удалить все дочерние узлы элемента, установив свойство innerHTML родительского узла пустым:
let menu = document.getElementById('menu');
menu.innerHTML = '';Заключение
- Используйте
parentNode.removeChild(), чтобы удалить дочерний узел родительского узла. parentNode.removeChild()генерирует исключение, если дочерний узел не может быть найден в родительском узле.