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

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

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

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

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

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

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

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

javascriptparent.textContent = '';

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

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

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

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

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