Грешка при неправилно почистване на родител в 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);
	}
});