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– 2024 by individual mozilla.org contributors. Content available under a Creative Commons license.
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)
Детального решения именно вашей учебной задачи приводить не буду, поскольку вы должны решить ее сами. На то она и учебная.
Node.childNodes
Доступный для чтения аттрибут Node.childNodes возвращает коллекцию дочерних элементов данного элемента.
Синтаксис
var ndList = elementNodeReference.childNodes;
ndList — упорядоченная коллекция объектов элементов, которые являются детьми данного элемента. Если у элемента нет детей, ndList пуст.
ndList — переменная, хранящая список дочерних элементов. Тип этого списка — NodeList .
Пример
// parg -- ссылка на элемент if (parg.hasChildNodes()) // Таким образом, сначала мы проверяем, не пуст ли объект, есть ли у него дети var children = parg.childNodes; for (var i = 0; i children.length; ++i) // сделать что-то с каждым внутренним элементом через children[i] // ПРИМЕЧАНИЕ: Список является ссылкой, Добавление или удаление дочерних элементов изменит список > >
// Это один из способов удалить все дочерние элементы из элемента // box -- ссылка на элемент с детьми while (box.firstChild) //Список является ссылкой, то есть он будет переиндексирован перед каждым вызовом box.removeChild(box.firstChild); >
Примечания
Элементы в коллекции — объекты, а не строки. Чтобы получить данные из этих объектов, вы должны использовать их свойства (например, elementNodeReference.childNodes[1].nodeName чтобы получить имя, и т. д.).
Объект document обладает 2-мя детьми: декларацией Doctype и корневым элементов, к которому как правило обращаются как documentElement . (В (X)HTML документах это HTML-элемент.)
childNodes также включают, например, текстовые узлы и комментарии. Чтобы пропустить их, используйте ParentNode.children (en-US) взамен.
Спецификации
| Specification |
|---|
| DOM Standard # ref-for-dom-node-childnodes① |
Совместимость с браузерами
BCD tables only load in the browser
Смотрите также
- Node.firstChild
- Node.lastChild
- Node.nextSibling
- Node.previousSibling
- ParentNode.children (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 7 авг. 2023 г. by MDN contributors.
Your blueprint for a better internet.
удалить все дочерние элементы js
Для удаления всех дочерних элементов в JavaScript можно использовать свойство innerHTML . Для этого нужно найти родительский элемент, у которого нужно удалить дочерние элементы. А далее, можно присвоить ему пустую строку в качестве значения свойства innerHTML .
Вот пример кода:
const parentElement = document.getElementById('parent'); parentElement.innerHTML = ''; Здесь мы находим родительский элемент с помощью метода getElementById , который ищет элемент по его id . Затем мы присваиваем родительскому элементу пустую строку в качестве значения свойства innerHTML , что приводит к удалению всех его дочерних элементов.