Chyba nesprávného čištění rodiče v JavaScriptu

Předpokládejme, že máme nějaký seznam. Předpokládejme, že po kliknutí na tlačítko chceme pokaždé znovu vytvořit tento seznam a vymazat jeho předchozí obsah. Začátečníci často dělají chybu, když se snaží vymyslet nějaké složité řešení. Podívejme se na jednoduchou variantu.

Předpokládejme, že získáme seznam do proměnné:

let ul = document.querySelector('ul');

Předpokládejme také, že získáme tlačítko:

let btn = document.querySelector('button');

Předpokládejme, že po kliknutí na tlačítko se náš seznam naplní některými hodnotami. Jako příklad jsem vzal náhodnou hodnotu, odpovídající aktuální vteřině:

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);
	}
});

V uvedeném kódu budou nové položky seznamu přidány za již existující. A my bychom chtěli, aby předchozí položky byly nejprve odstraněny. Řešení je jednoduché - stačí jednoduše vymazat text našeho tagu ul:

btn.addEventListener('click', function() {
	ul.textContent = ''; // čistíme seznam
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});