Как удалить элемент?
Управление жизненным циклом элементов на веб-странице включает в себя не только их создание, но и корректное удаление, когда они больше не нужны пользователю. В современном JavaScript существует несколько эффективных способов удаления элементов из DOM-дерева, каждый из которых имеет свои особенности применения. Самым простым, лаконичным и современным способом является метод el.remove(), который вызывается непосредственно на удаляемом элементе. Этот подход поддерживается всеми актуальными браузерами и не требует обращения к родительскому контейнеру, что делает код более чистым и читаемым.
Исторически сложился другой подход, который часто встречается в старых кодовых базах — это метод parent.removeChild(el). Для его использования необходимо сначала найти родительский элемент удаляемого узла, а затем передать сам узел в качестве аргумента. Хотя этот метод требует больше строк кода по сравнению с remove(), он может быть полезен в специфических сценариях оптимизации или при необходимости строгого контроля иерархии.
Иногда вместо полного удаления элемента требуется заменить его на другой. Для этой цели отлично подходит метод el.replaceWith(newEl), который автоматически заменяет текущий элемент на новый узел или набор узлов, переданных в аргументах. Если же задача заключается в быстрой очистке крупного контейнера от всех дочерних элементов, часто используют прием сброса свойства innerHTML родительского элемента в пустую строку, например, innerHTML = ''. Этот способ работает очень быстро, хотя и имеет нюансы, связанные с утечками памяти в некоторых браузерах из-за не удаленных должным образом слушателей событий.
Важно отметить, что удаление элемента из DOM с помощью перечисленных методов не уничтожает его объект в оперативной памяти окончательно, если на него продолжают ссылаться переменные в коде JavaScript. Благодаря этому удалённые элементы можно вставить обратно в документ в другое место с помощью стандартных методов вставки, сохранив при этом их состояние, привязанные данные и вложенную структуру.