Fejl ved forkert rydning af forælder i JavaScript

Lad os antage, at vi har en bestemt liste. Lad os sige, at vi ved at klikke på en knap hver gang ønsker at genskabe denne liste, ved at rydde dens tidligere indhold. Begyndere laver ofte en fejl ved at forsøge at finde på en eller anden kompliceret løsning. Lad os se på en enkel mulighed.

Lad os sige, at vi henter listen i en variabel:

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

Lad os også sige, at vi henter en knap:

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

Lad os sige, at ved et klik på knappen bliver vores liste fyldt med visse værdier. For eksemplets skyld tog jeg en tilfældig værdi, svarende til det aktuelle 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 vist ovenfor vil nye listepunkter blive tilføjet efter de allerede eksisterende. Men vi ønsker, at de foregående punkter først skal fjernes. Løsningen er enkel - vi skal blot rydde teksten i vores ul-tag:

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