JavaScript removeChild() — видалити дочірній вузол

Метод removeChild() видаляє вузол із батька й повертає його — видалений, але живий.

правити

Загальний опис

Незручність очевидна: викликати треба на батькові, а не на самому вузлі. Тому в старому коді всюди зустрічається node.parentNode.removeChild(node).

Сьогодні це пишуть просто як node.remove() — і не треба ані шукати батька, ані перевіряти, чи він узагалі є.

Видалений вузол не зникає з пам'яті: він повертається з методу, і його можна вставити назад. Обробники подій на ньому лишаються — вони оживуть, щойно вузол повернеться в документ.

правити

Порада

Просто прибрати елемент — пиши element.remove(). removeChild() потрібен лише тоді, коли видалений вузол ще знадобиться.

автор: NagarD правити

+ додати пораду чи нотатку

Переглядачі

Стаціонарні переглядачі Мобільні переглядачі

Підтримка: стаціонарні переглядачі

Переглядач
removeChild	1+	1+	1+	7+	12+	9+

Підтримка: мобільні переглядачі

Переглядач
removeChild	yes	yes	yes	yes

Приклади

+ запропонувати свій приклад у пісочниці

<ul id="list"><li id="item">Пункт</li></ul>

const item = document.getElementById('item');
const list = document.getElementById('list');

// повертає вузол — він живий, лише поза документом
const removed = list.removeChild(item);

// обробники нікуди не поділись — оживуть після повернення
list.appendChild(removed);

// сучасно й коротко
item.remove();