Удаление всех дочерних элементов из узла 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