Javascript удалить элемент dom

Удалить элемент (node) из DOM-объекта в JavaScript можно при помощи метода .removeChild(childNode).

Самый быстрый и простой способ удалить узел — найти элемент, выбрать его родительский узел при помощи .parentNode, и вызвать метод .removeChild(childNode).

parentNode и removeChild

Например у нас есть следующий HTML-код:

Узел ниже будет удален.

Чтобы удалить элемент div#delete_node, нужно выполнить следующий JavaScript-код:

Node.prototype.remove()

Еще более изящный способ — повесить на объект Node.prototype новый метод remove, вызвав который, элемент удалит сам себя.

При помощи этого метода можно удалить любой узел DOM, даже html, у которого есть свой parentNodedocument.

Разумеется вызывать метод .remove(), можно только после загрузки всего DOM-дерева, повесив обработчик на событие DOMContentLoaded.

На этой странице

Метод Node.remove() удаляет узел из дерева DOM

То, что элемент удален из DOM, еще не значит, что он удален совсем!

Он остался объектом и исчезнет только тогда, когда исчезнут все ссылки на него.

Синтаксис

  • Node — любой узел DOM

Пример

Использование remove()

Полифилл

Можно создать полифилл для IE 9 и выше, используя следующий код:

Как вы знаете, DOM не поддерживает удаления элемента напрямую. При удалении элемента с JavaScript, вы должны сначала перейти на его родителей. Это процесс всегда был странным и не таким простым.

Согласно DOM Уровень 4 функции, который является текущей версией в разработке, существуют новые удобные методы мутации: append(), prepend(), before(), after(), replace(), и remove(). В этой статье, мы сосредоточимся на JavaScript remove() методе.

Пуленепробиваемый путь

Предположим, что у нас есть следующий HTML элемент:

… чтобы удалить его из дерева DOM, вам нужно будет выполнить следующие линии JavaScript’а:

Читайте также:  Радеон hd 5770 цена

Путем jQuery

Если вы используете JavaScript фреймворк, такой как jQuery, тогда для взятия элемента из DOM, вам нужно использовать remove() метод:

Обратили внимание на сходство с jQuery? Этот новый способ является более простым и интуитивным.

Поддержка браузеров

На данный момент поддерживаются следующие браузеры: Chrome, Opera, Safari и скоро Firefox 23. Может быть это не так здорово для производственных целей, но все же отлично подходит для тестирования и отладки.

Однако, если вы ищете большую поддержку браузеров, тогда есть polyfills, за которыми стоит следить: