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

Когда элемент больше не нужен, его можно удалить из DOM. Например, так убирают уведомления, карточки задач или элементы отфильтрованного списка.

• Удаление элемента
• Удаление карточки по кнопке
• Удаление нескольких элементов
• Удалить или скрыть
• Итого

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

Метод remove() удаляет выбранный элемент из DOM вместе с его вложенными элементами. Сначала найдите элемент, затем вызовите метод без аргументов.

<div class="notification">Данные сохранены</div>

const notification = document.querySelector('.notification');

notification.remove();

После вызова remove() уведомление исчезнет из DOM.

remove() меняет только страницу. Если задача или уведомление хранятся в массиве либо на сервере, обновите и эти данные. Иначе при следующей отрисовке удалённый элемент может появиться снова.

Удаление карточки по кнопке

Иногда найден не сам блок, а элемент внутри него. Например, кнопка удаления находится в карточке задачи. В этом случае найдите нужного предка через closest().

<article class="task">
  <h3>Подготовить презентацию</h3>
  <button class="delete-button">Удалить</button>
</article>

const deleteButton = document.querySelector('.delete-button');
const task = deleteButton.closest('.task');

if (task) {
  task.remove();
}

Такую логику обычно вызывают после нажатия на кнопку. Будет удалена вся карточка article, а не только кнопка.

Удаление нескольких элементов

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

const completedTasks = document.querySelectorAll('.task.is-completed');

completedTasks.forEach((task) => {
  task.remove();
});

Так со страницы исчезнут все задачи с классом is-completed.

Удалить или скрыть

Скрытие подходит, когда элемент нужно показать снова. Удаление подходит, когда он больше не нужен на странице.

const notification = document.querySelector('.notification');

notification.hidden = true; // скрыть, элемент остаётся в DOM
// Позже:
notification.hidden = false; // показать снова

После notification.remove() элемента в DOM уже нет. Если его предполагается показать снова, используйте скрытие вместо удаления.

Итого

remove() удаляет выбранный элемент из DOM. Если нужно удалить контейнер по вложенному элементу, найдите его через closest(). Для нескольких элементов используйте querySelectorAll() и forEach(). Скрывайте элементы, которые понадобятся снова, а данные приложения обновляйте отдельно.