Удаление всех дочерних элементов из узла DOM — это то, что нам иногда приходится делать в JavaScript.

В этой статье мы рассмотрим, как удалить все дочерние элементы узла DOM с помощью JavaScript.

Очистка внутреннего HTML

Один из способов удалить все дочерние элементы элемента — установить для свойства innerHTML элемента пустую строку.

Например, если у нас есть следующий HTML:

<button>
  clear
</button>
<div>
</div>

Затем мы можем написать следующий JavaScript, чтобы добавить элементы в div.

И мы можем очистить элементы, нажав кнопку очистки:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
button.addEventListener('click', () => {
  div.innerHTML = ''
})

Мы получаем div и кнопку с document.querySelector.

Затем в цикле for мы создаем элементы p и добавляем их в div.

Затем мы вызываем addEventListener для button с 'click' в качестве первого аргумента, чтобы добавить прослушиватель кликов.

Затем в обратном вызове мы устанавливаем div.innerHTML в пустую строку, чтобы очищать ее содержимое при нажатии кнопки.

Очистка textContent

Вместо очистки innerHTML мы можем очистить textContent.

Для этого пишем:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
button.addEventListener('click', () => {
  div.textContent = ''
})

Мы просто меняем innerHTML на textContent .

А в остальном код тот же.

Цикл удаления каждого lastChild from the DOM

Мы можем удалить все дочерние элементы элемента из DOM с помощью метода removeChild.

Например, мы можем написать:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
button.addEventListener('click', () => {
  while (div.firstChild) {
    div.removeChild(div.lastChild);
  }
})

У нас есть цикл while внутри прослушивателя кликов.

Мы проверяем, есть ли какие-либо элементы firstChild в пределах div с помощью div.firstChild .

Если они есть, мы вызываем removeChuld, чтобы удалить div.lastChild, пока не останется firstChild.

Цикл удаления каждого lastElementChild from the DOM

Мы также можем удалить все lastElementChild из элемента.

Для этого пишем:

const div = document.querySelector('div')
const button = document.querySelector('button')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = 'hello'
  div.appendChild(p)
}
button.addEventListener('click', () => {
  while (div.lastElementChild) {
    div.removeChild(div.lastElementChild);
  }
})

lastElementChild возвращает последний дочерний элемент данного элемента.

Мы можем просто вызвать removeChild, чтобы удалить их все, пока ничего не останется.

Заключение

Мы можем легко удалить все дочерние элементы элемента, установив innerHTML или textContent.

Кроме того, мы можем удалить дочерние элементы один за другим с помощью removeChild.

Дополнительные материалы на plainenglish.io