Chyba nesprávneho čistenia rodiča v JavaScripte

Majme nejaký zoznam. Po kliknutí na tlačidlo chceme zakaždým znova vytvoriť tento zoznam, pričom vyčistíme jeho predchádzajúci obsah. Začiatočníci často robia chybu, keď sa pokúšajú vymyslieť nejaké zložité riešenie. Pozrime sa na jednoduchú možnosť.

Predpokladajme, že získame zoznam do premennej:

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

Predpokladajme tiež, že získame tlačidlo:

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

Po kliknutí na tlačidlo nech sa náš zoznam vyplní nejakými hodnotami. Pre príklad som zobral náhodnú hodnotu, zodpovedajúcu aktuálnej sekunde:

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 uvedenom kóde sa nové položky zoznamu budú pridávať po už existujúcich. Ale my by sme chceli, aby sa predchádzajúce položky najprv odstránili. Riešenie je jednoduché - stačí jednoducho vyčistiť text nášho elementu ul:

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