Node.removeChild
Удаляет дочерний элемент из DOM. Возвращает удалённый элемент.
Синтаксис
var oldChild = element.removeChild(child); element.removeChild(child);
- child дочерний элемент который будет удалён из DOM.
- element родительский элемент удаляемого child .
- oldChild ссылка на удаляемый дочерний элемент. oldChild === child .
Удалённый дочерний элемент остаётся в памяти, но больше не является частью DOM. Вы можете повторно использовать удалённый элемент с помощью ссылки на объект — oldChild .
Если child не является дочерним элементом element , тогда метод генерирует исключение. Также это происходит если child является дочерним элементом element во время вызова метода, но был удалён во время вызова обработчика событий удаляющего элемент(т.e при удалении элемента непосредственно перед вызовом обработчика событий).
Пример
// Удаление элемента с известным родителем var d = document.getElementById("top"); var d_nested = document.getElementById("nested"); var throwawayNode = d.removeChild(d_nested);
// Удаление элемента без указания его родителя var node = document.getElementById("nested"); if (node.parentNode) node.parentNode.removeChild(node); >
// Удаление всех дочерних элементов var element = document.getElementById("top"); while (element.firstChild) element.removeChild(element.firstChild); >
Спецификации
| Specification |
|---|
| DOM Standard # dom-node-removechild |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Node.replaceChild
- Node.parentNode
- ChildNode.remove (en-US)
Found a content problem with this page?
- Edit the page on GitHub.
- Report the content issue.
- View the source on GitHub.
This page was last modified on 3 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
MDN
Support
- Product help
- Report an issue
Our communities
Developers
- Web Technologies
- Learn Web Development
- MDN Plus
- Hacks Blog
- Website Privacy Notice
- Cookies
- Legal
- Community Participation Guidelines
Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.
удалить все дочерние элементы js
Для удаления всех дочерних элементов в JavaScript можно использовать свойство innerHTML . Для этого нужно найти родительский элемент, у которого нужно удалить дочерние элементы. А далее, можно присвоить ему пустую строку в качестве значения свойства innerHTML .
Вот пример кода:
const parentElement = document.getElementById('parent'); parentElement.innerHTML = ''; Здесь мы находим родительский элемент с помощью метода getElementById , который ищет элемент по его id . Затем мы присваиваем родительскому элементу пустую строку в качестве значения свойства innerHTML , что приводит к удалению всех его дочерних элементов.
Javascript DOM удаление всех дочерних узлов
jQuery есть на сайте? Или какой другой JS framework? Или Вы пытаетесь это реализовать стандартными средствами javascript?
26 сен 2015 в 15:01
Что вы уже пробовали сделать для решения задачи? Что именно не получилось? Решение учебных задач за учащихся очень не приветствуется на этом сайте.
26 сен 2015 в 15:01
на чистом js. проблема не знаю, как стереть сразу 10 параграфов
26 сен 2015 в 15:05
разве document.getElementById(«test»).innerHTML = «» не прокатит?
26 сен 2015 в 15:16
пробывал, но не так не получилось.
26 сен 2015 в 15:25
3 ответа 3
Сортировка: Сброс на вариант по умолчанию
Существует несколько способов удаления дочерних узлов. Например, вы можете вручную обойти все дочерние узлы и удалить их:
var container = document.getElementById('container'); while (container.firstChild)
Детального решения именно вашей учебной задачи приводить не буду, поскольку вы должны решить ее сами. На то она и учебная.
Удаление всех дочерних элементов узла DOM в JavaScript
В разработке веб-приложений на JavaScript часто встречается задача, когда нужно удалить все дочерние элементы определенного узла DOM. Например, есть раздел страницы с некоторым контентом, который должен быть полностью очищен перед тем, как загрузить и отобразить новый контент.
Пример такого HTML-кода:
Paragraph 1
Paragraph 2
Paragraph 3
Таким образом, задача состоит в том, чтобы удалить все параграфы
внутри узла с id=»content» , чтобы в итоге остался пустой :
Решение с использованием чистого JavaScript (DOM API)
Для решения этой задачи можно использовать цикл, который будет продолжать удалять первый дочерний элемент узла, пока они не закончатся. Для этого воспользуемся методом removeChild() :
var node = document.getElementById(«content»); while (node.firstChild)
Решение с использованием jQuery
Если используется библиотека jQuery, то это можно сделать гораздо проще с помощью метода empty() :
$("#content").empty();
Оба этих способа позволяют эффективно и безопасно удалять все дочерние элементы узла DOM в JavaScript.