Как удалить html элемент js

Как удалить элемент с помощью JavaScript

Веб технологии, на сегодняшний день, развиваются как никогда стремительно, а вместе с ними растут требования пользователей и сложность сайтов. Статический HTML сайт уже считается чем-то очень древним и неинтересным, современный пользователь требует интерактивности. А интерактивность в свою очередь, технически означает манипуляции HTML элементами в дереве DOM.

В этой статье рассмотрим, как можно удалить элемент и какие для этого есть варианты. Предположим, что у нас есть такой элемент, который нужно удалить со страницы:

Element to remove

Удаление элемента с jQuery

Библиотека jQuery была очень популярна в свое время и даже по сей день активно используется многими веб разработчиками. Если сайт на WordPress, то там с большой вероятностью используется jQuery.

И так, если вы используете jQuery, то, для удаления элемента, можно применить метод remove() :

$('#my-element').remove();

Все, крайне просто. Вы выбираете нужный элемент, в данном случае это элемент с id=»my-element» и используете метод remove() .

Старый метод

Надежный способ удаления элемента со страницы, который точно работает если вы используете стандарт ES5 и поддерживается всеми браузерами даже включая самый старый Internet Explorer, следующий:

var elementToRemove = document.getElementById('my-element');
elementToRemove.parentNode.removeChild(elementToRemove);

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

Новый метод

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

const elementToRemove = document.getElementById('my-element');
elementToRemove.remove();

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

На этом все, это были три способа удалить элемент с помощью JavaScript.

Element.remove()

Метод Element.remove() удаляет элемент из DOM-дерева, в котором он находится.

Синтаксис

remove();

Примеры

Использование remove()

div id="div-01">Это div-01div> div id="div-02">Это div-02div> div id="div-03">Это div-03div>

var el = document.getElementById("div-02"); el.remove(); // Удалит элемент div с идентификатором 'div-02'

Область видимости Element.remove() нерасширяема

Метод remove() не работает с оператором with . Подробнее читайте в справке по Symbol.unscopables .

with (node)  remove(); > // ReferenceError: remove is not defined

Спецификации

Specification
DOM Standard # ref-for-dom-childnode-remove①

Поддержка браузерами

BCD tables only load in the browser

Смотрите также

Found a content problem with this page?

Edit the page on GitHub.
Report the content issue.
View the source on GitHub.

This page was last modified on 3 авг. 2023 г. by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Product help
Report an issue

Our communities

Developers

Web Technologies
Learn Web Development
MDN Plus
Hacks Blog

Website Privacy Notice
Cookies
Legal
Community Participation Guidelines

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

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

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

elem 1

elem 2

elem 3

elem 4

elem 5

Давайте сделаем так, чтобы любой абзац удалялся по клику на нем:

let elems = document.querySelectorAll(‘p’); for (let elem of elems) < elem.addEventListener('click', function() < elem.remove(); >); >

Дан следующий код:

Сделайте так, чтобы любая li удалялась по клику на нее.