Як видалити елемент за допомогою 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.