Ошибка неправильной очистки родителя в JavaScript
Пусть у нас есть некоторый список. Пусть по нажатию на кнопку мы хотим каждый раз заново сформировать этот список, очистив его предыдущее содержимое. Новички часто совершают ошибку, пытаясь придумать какое-то сложное решение. Давайте посмотрим простой вариант.
Пусть мы получаем список в переменную:
let ul = document.querySelector('ul');
Пусть также мы получаем кнопку:
let btn = document.querySelector('button');
Пусть по нажатию на кнопку наш список заполняется некоторыми значениями. Для примера я взял случайное значение, соответствующее текущей секунде:
btn.addEventListener('click', function() {
let rand = new Date.getSeconds();
for (let i = 0; i <= rand; i++) {
let li = document.createElement('li');
li.textContent = i;
ul.append(li);
}
});
В приведенном выше коде, новые пункты списка
будут добавляться после уже существующих.
А мы бы хотели, чтобы предыдущие пункты
сначала удалялись. Решение простое -
нужно просто очистить текст нашего
тега ul
:
btn.addEventListener('click', function() {
ul.textContent = ''; // чистим список
let rand = new Date.getSeconds();
for (let i = 0; i <= rand; i++) {
let li = document.createElement('li');
li.textContent = i;
ul.append(li);
}
});