Вы здесь: Главная » JavaScript » Удаление html-элементов в JavaScript

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

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

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

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

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

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

parentNode-this

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

  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3
  • Элемент списка 4
  • Элемент списка 5

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

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

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

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

Исчезающий блок 1

Исчезающий блок 2

Исчезающий блок 3

Исчезающий блок 4

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

caniuse.com Поддержка метода remove()

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

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

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

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

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

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

  • Элемент списка 1
  • Элемент списка 2
  • Элемент списка 3
  • Элемент списка 4
  • Элемент списка 5
Заменить пустой строкой

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

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

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

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

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

Текст 1-го абзаца внутри div#myDiv

Текст 2-го абзаца внутри div#myDiv

Текст 3-го абзаца внутри div#myDiv

Метод jQuery elem.detach()

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

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

Первый

  • Lorem ipsum dolor sit.
  • Obcaecati distinctio deserunt mollitia.
  • Magni omnis, odit iure?
  • Saepe, eum delectus eius!

Второй

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

 

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *