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

remove()

Самый простой и правильный вариант удаления узла использовать функцию remove() вызванную у самого удаляемого узла

let e = document.querySelector('.element');
e.remove(); // узел будет удален из дерева

Пример 1.1

Открыть пример 1.1 в новой вкладке

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

let collection = document.querySelectorAll('.parent > div'); // Коллекция элементов которые нужно удалить
for (const element of collection) {
    element.remove(); // Удаляем
}

Пример 1.2

Теперь удалим в цикле 5 элементов сразу

Открыть пример 1.2 в новой вкладке

removeChild()

Существует еще метод, который удаляет дочерний элемент - это removeChild() и возвращает его, чтобы использовать его например в дальнейшем.

let parent = document.querySelector('.parent'); // Выбираем родительский элемент
let deleted = document.querySelector('.deleted'); // Выбираем контейнер для удаленных элементов
let child = parent.firstElementChild; // Элемент который нужно удалить
if (child !== null) {
    let deletedElement = parent.removeChild(child); // Удаляем элемент, при этом из функции будет возвращен удаленный элемент
    deleted.append(deletedElement);
}

Пример 1.3

Имеем список элементов, из которого нужно удалить элементы. Удаленные элементы перемещаем в другой список.

Открыть пример 1.3 в новой вкладке

Еще пример, отдельная кнопка для удаления каждого элемента.

Пример 1.4 Удаление отдельного элемента

Открыть пример 1.4 в новой вкладке

jquery remove()

Если используется jquery, там есть метод remove()

$('#selector_for_remove').remove() // Удалили сам элемент и повешенные на него обработчики

Пример 1.5 Удаление отдельного элемента

Открыть пример 1.5 в новой вкладке

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

Открыть пример 1.6 в новой вкладке

Примечания

• jquery метод remove не возвращает ошибок если удаляемый элемент не найден

Исходный код

• Пример 1.1
• Пример 1.2
• Пример 1.3
• Пример 1.4
• Пример 1.5
• Пример 1.6

Содержание