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