Fout bij het onjuist leegmaken van de ouder in JavaScript

Stel we hebben een bepaalde lijst. Stel dat we bij het klikken op een knop deze lijst elke keer opnieuw willen opbouwen, waarbij we de vorige inhoud leegmaken. Beginners maken vaak de fout door een ingewikkelde oplossing te proberen te bedenken. Laten we eens kijken naar een eenvoudige optie.

Stel we krijgen de lijst in een variabele:

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

Stel we krijgen ook een knop:

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

Stel dat bij het klikken op de knop onze lijst gevuld wordt met enkele waarden. Als voorbeeld heb ik een willekeurige waarde genomen, overeenkomend met de huidige seconde:

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

In de bovenstaande code zullen nieuwe lijstitems worden toegevoegd na de reeds bestaande. En we zouden willen dat de vorige items eerst worden verwijderd. De oplossing is eenvoudig - we moeten simpelweg de tekst van onze tag ul leegmaken:

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