[ITEM 2] QUESTION: Как удалить элемент?

Управління життєвим циклом елементів на веб-сторінці включає не лише їх створення, а й коректне видалення, коли вони більше не потрібні користувачеві. У сучасному JavaScript існує кілька ефективних способів видалення елементів із DOM-дерева, кожен з яких має свої особливості застосування. Найпростішим, лаконічним і сучасним способом є метод el.remove(), який викликається безпосередньо на елементі, що видаляється. Цей підхід підтримується всіма актуальними браузерами і не вимагає звернення до батьківського контейнера, що робить код чистішим і зрозумілішим.

Історично склався інший підхід, який часто зустрічається в старих кодових базах — це метод parent.removeChild(el). Для його використання необхідно спочатку знайти батьківський елемент вузла, що видаляється, а потім передати сам вузол як аргумент. Хоча цей метод вимагає більше рядків коду порівняно з remove(), він може бути корисним у специфічних сценаріях оптимізації або за необхідності суворого контролю ієрархії.

Іноді замість повного видалення елемента потрібно замінити його на інший. Для цієї цілі чудово підходить метод el.replaceWith(newEl), який автоматично замінює поточний елемент на новий вузол або набір вузлів, переданих в аргументах. Якщо ж завдання полягає в швидкому очищенні великого контейнера від усіх дочірніх елементів, часто використовують прийом скидання властивості innerHTML батьківського елемента в порожній рядок, наприклад, innerHTML = ''. Цей спосіб працює дуже швидко, хоча і має нюанси, пов'язані з витоками пам'яті в деяких браузерах через неналежним чином видалені слухачі подій.

Важливо зазначити, що видалення елемента з DOM за допомогою перелічених методів не знищує його об'єкт в оперативній пам'яті остаточно, якщо на нього продовжують посилатися змінні в коді JavaScript. Завдяки цьому видалені елементи можна вставити назад у документ в інше місце за допомогою стандартних методів вставки, зберігши при цьому їхній стан, прив'язані дані та вкладену структуру.