Удалить элемент html через js

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

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

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

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

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

, а затем удалить дочерний узел с именно этим элементом ( removeChild(this) ). Для того чтобы убедиться, кто родитель, кто потомок, мы используем console.log() для просмотра элементов:

• Элемент списка 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:

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

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

или
с каким-либо id , но удалить все вложенные
. Для этого можно воспользоваться свойством innerHTML или innerText , или же textContent , присвоив в него пустую строку:

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

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

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

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

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

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

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

Давайте используем оба метода jQuery — remove() и empty() — в примере: при клике на любом из абзацев вы удаляете только этот абзац, при клике на кнопке — удаляете все содержимое .

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

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

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

Метод jQuery elem.detach()

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

Источник

HTML DOM Element remove()

The remove() method removes an element (or node) from the document.

Note

The element or node is removed from the Document Object Model (the DOM).

See Also:

Syntax

Parameters

Return Value

Browser Support

element.remove() is a DOM Living Standard feature.

It is supported in all modern browsers:

Chrome	Edge	Firefox	Safari	Opera
Yes	Yes	Yes	Yes	Yes

element.remove() is not supported in Internet Explorer 11 (or earlier).

COLOR PICKER

Report Error

If you want to report an error, or if you want to make a suggestion, do not hesitate to send us an e-mail:

Thank You For Helping Us!

Your message has been sent to W3Schools.

Top Tutorials

Top References

Top Examples

Get Certified

W3Schools is optimized for learning and training. Examples might be simplified to improve reading and learning. Tutorials, references, and examples are constantly reviewed to avoid errors, but we cannot warrant full correctness of all content. While using W3Schools, you agree to have read and accepted our terms of use, cookie and privacy policy.

Источник