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

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

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

<div id="my-element">Element to remove</div>

Удаление элемента с 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.