Як видалити елемент з DOM?

JavaScriptJunior~1 хв читання

Щоб видалити елемент з DOM, є кілька способів: від класичних (removeChild) до сучасних (remove). Ось усі основні варіанти:

Найпростіший і найзручніший.

javascript

const element = document.querySelector('.card');
element.remove(); // повністю видаляє елемент з DOM

Цей метод не вимагає звертатися до батька - видаляє себе сам.

Використовувався до появи .remove() і досі трапляється у старому коді.

javascript

const element = document.querySelector('.card');
element.parentNode.removeChild(element);

Зазвичай потрібен, якщо треба працювати зі старими браузерами.

Якщо потрібно очистити контейнер:

javascript

const container = document.querySelector('.list');
container.innerHTML = ''; // очищає весь вміст

або більш явно:

javascript

while (container.firstChild) {
  container.removeChild(container.firstChild);
}

Можна, наприклад, видалити елемент при кліку:

javascript

document.querySelector('.btn').addEventListener('click', () => {
  const card = document.querySelector('.card');
  card?.remove();
});

javascript

document.querySelectorAll('.item').forEach((el, i) => {
  if (i > 2) el.remove(); // видаляємо всі елементи після третього
});

Спосіб	Коли використовувати
`element.remove()`	Сучасний і простий спосіб
`parentNode.removeChild()`	Для старого коду і IE
`container.innerHTML = ''`	Швидко очистити контейнер
Умовне видалення	Для динамічного UI (на кліках, фільтрах тощо)

Для співбесіди

Premium

Коротка відповідь допоможе вам впевнено відповідати на цю тему під час співбесіди.