Удаление html-элементов в JavaScript

В JavaScript можно создавать элементы с нуля и добавлять их в уже существующую html-разметку (см. статью "Создание html-элементов в JavaScript"). Однако нередко возникает вопрос - а как удалить уже существующие html-элементы? Давайте рассмотрим способы.

Удаление html-элементов методом removeChild()

Метод removeChild() существует достаточно давно, поэтому им стоит пользоваться там, где нужна поддержка старых браузеров. Однако с ним стоит быть внимательным, т.к. "удалить ребенка" (именно так переводится этот метод с английского) можно только у его родителя. Т.е. при использовании этого метода код будет такой:

Давайте рассмотрим удаление элементов на примере списка:

В этом примере мы назначаем обработчик клика каждому элементу <li> списка <ul id="testUl"> и в нем удаляем этот элемент <li>. Посмотрите, насколько запутанной получилась строчка this.parentNode.removeChild(this). Тем не менее интерпретатор JavaScript браузера ее отлично понимает, т.к. мы говорим ему, что нужно сначала найти родительский узел этого элемента <li> (this.parentNode), т.е. <ul>, а затем удалить дочерний узел с именно этим элементом (removeChild(this)). Для того чтобы убедиться, кто родитель, кто потомок, мы используем console.log() для просмотра элементов:

Попробуйте сами:

Удаление методом remove()

По сравнению с removeChild() метод remove() прост и понятен:

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

В этом примере использован метод setInterval() для формирования постепенного исчезновения блока.

Поскольку метод remove() относится к новому стандарту, он совсем не поддерживается в Internet Explorer (до 11 версии включительно), Opera Mini (она вообще мало, что поддерживает из новых стандартов), а в более прогрессивных Chrome & Firefox  поддержка есть с 23 версии, в Opera - с  15, в Safari - с 7, т.е. примерно с 2012 года. Более полная информация - на сайте caniuse.com:

Для браузеров, не поддерживающих данный метод (и ряд других), можно использовать полифилы DOM4 или DOMShim.

Удаление всех элементов внутри родителя

Часто бывает такая ситуация, что внутри родительского элемента необходимо удалить все узлы-потомки. Например, в том же списке нужно оставить <ul> или <ol> с каким-либо id, но удалить все вложенные <li>. Для этого можно воспользоваться свойством innerHTML или innerText, или же textContent, присвоив в него пустую строку:

Этот способ сработает достаточно быстро, но в некоторых браузерах будет быстрее вариант с удалением всех узлов элемента при отслеживании наличия у него вложенных элементов-потомков, или детей. Это можно сделать несколькими способами:

Переменная node в приведенных примерах - это тот элемент (узел), в котором нужно удалить вложенные (дочерние) элементы.

В примере ниже мы используем различные виды удаления вложенных элементов списка с возможностью его восстановить и попробовать другие.

Удаление элементов в jQuery

В jQuery один элемент вы удаляете с помощью метода remove(), а для удаления всех вложенных элементов есть метод empty(). Само собой, что вы должны сначала подключить эту библиотеку, скачав ее на оффсайте или используя CDN. При использовании обоих методов все данные, включая обработчики событий, удаляются вместе с элементом.

Пример с использованием методов jQuery remove() и empty()

Давайте используем оба метода jQuery - remove() и empty() - в примере: при клике на любом из абзацев вы удаляете только этот абзац, при клике на кнопке - удаляете все содержимое <div id="myDiv">.

Попробуйте сами:

Метод jQuery elem.detach()

Можно также использовать метод detach(), который не удаляет данные и обработчики событий вместе с элементами. Он хорош в том случае, если вы планируете после каких-либо действий вернуть элементы на свое бывшее или в другое место. Например, мы можем перемещать ul между 2-мя блоками, используя метод detach() для удаления списка из первого элемента и метод appendTo() для добавления этого списка во второй блок. Удаленный список мы сохраняем в переменную, которую используем  при добавлении списка во второй, а затем и в первый блок. При этом можно заметить, что при клике на элементах li нашего перемещаемого списка срабатывают собственные события клика, которые изменяют его внешний вид за счет добавления/удаления класса different.

Поэкспериментируйте самостоятельно, кликая то на первом, то на втором блоке.

В jQuery также можно удалить вложенные элементы и такими способами:

Пример с удалением и скрытием/отображением элемента

Допустим вам нужно удалить некий div с анимацией, которая запускается по клику на этом div-е и всего один раз. Для одноразовой обработки собвтия можно использовать событие jQuery one() или метод addEventListener('click', function(){ }, {once: true}) - в конце важно указать {once: true}. Для удаления div-а используем метод remove(), который есть как в нативном JavaScript, так и jQuery, а скрыть/показать элемент можно простым переключением между добавлением/удалением класса hidden с единственным свойством display: none.

Протестировать пример можно прямо сейчас. Для запуска анимации щелкните на картинке.