Как удалить всех детей элемента JS

Рассмотрим несколько способов удаления всех детей элемента с использованием JavaScript. Пусть у нас есть следующий родитель:

<ul id="list">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

Способ 1: удаление детей через textContent

Самый простой способ удалить всех детей - это родителю в textContent. записать пустое значение. Давайте сделаем это.

Получим ссылку на родителя с помощью метода querySelector:

let parent = document.querySelector('#list');

Удалим все его дочерние элементы:

parent.textContent = '';

Способ 2: Использование метода remove

Второй метод основан на использовании метода remove. Этот метод удаляет указанный дочерний элемент из родительского элемента. Мы можем получить массив дочерних элементов, перебрать их циклом и удалить каждый из них. Давайте сделаем это. Получим массив дочерних элементов:

let elems = document.querySelectorAll('#list li');

Переберем их циклом и для каждого выполним метод для удаления:

for (let elem of elems) {
	elem.remove();
}