Feil med feil rensing av forelder i JavaScript

La oss si at vi har en liste. La oss si at vi hver gang vi klikker på en knapp ønsker å gjenoppbygge denne listen ved å rense dens tidligere innhold. Nybegynnere gjør ofte feil ved å prøve å finne på en komplisert løsning. La oss se på en enkel variant.

La oss si at vi henter listen inn i en variabel:

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

La oss si at vi også henter en knapp:

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

La oss si at når vi klikker på knappen, skal listen vår fylles med noen verdier. For eksemplet tok jeg en tilfeldig verdi, som tilsvarer gjeldende sekund:

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

I koden ovenfor vil nye listepunkter blir lagt til etter de allerede eksisterende. Og vi ønsker at de foregående punktene først skal fjernes. Løsningen er enkel - vi må bare rense teksten til vår ul-tag:

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