Napaka nepravilnega čiščenja starša v JavaScript

Recimo, da imamo nek seznam. Recimo, da ob kliku na gumb želimo vsakič znova oblikovati ta seznam, tako da očistimo njegovo prejšnjo vsebino. Začetniki pogosto naredijo napako, ko poskušajo izmisliti kakšno zapleteno rešitev. Poglejmo si preprosto različico.

Recimo, da dobimo seznam v spremenljivko:

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

Recimo tudi, da dobimo gumb:

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

Recimo, da ob kliku na gumb naš seznam zapolni z nekaterimi vrednostmi. Za primer sem vzel naključno vrednost, ki ustreza trenutni sekundi:

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 zgornji kodi se bodo novi elementi seznama dodajali po že obstoječih. Mi pa bi želeli, da se prejšnji elementi najprej odstranijo. Rešitev je preprosta - moramo samo očistiti besedilo našega označevalca ul:

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