Как удалить элемент DOM (JavaScript)

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

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

parentNode и removeChild

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

<div> <p>Узел ниже будет удален...</p> <div id="delete_node">Узел для удаления</div> </div>

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

var node = document.querySelector('#delete_node'); node.parentNode.removeChild(node);

Node.prototype.remove()

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

/** * Объявляем Node.prototype.remove */ var properties = { 'remove': { enumerable: false, writable: false, value: function() { if (!this.parentNode) { throw "Parent node not exists"; } this.parentNode.removeChild(this); return this; } } }; Object.defineProperties(Node.prototype, properties); // Метод можно вызвать только после загрузки всего DOM-дерева document.addEventListener('DOMContentLoaded', function(){ document.querySelector('#delete_node').remove(); });

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

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

Категории

ПрограммированиеJavaScriptВеб-дизайнHTMLОбъектыDOMDOM в JavaScriptОбъекты в JavaScriptprototype

Читайте также

Комментарии