Felaktig rensning av förälder i JavaScript

Låt oss säga att vi har en lista. Låt oss säga att vi vid varje klick på en knapp vill skapas om denna lista på nytt, efter att ha rensat dess tidigare innehåll. Nybörjare gör ofta misstaget att försöka komma på någon komplex lösning. Låt oss titta på ett enkelt alternativ.

Låt oss säga att vi hämtar listan i en variabel:

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

Låt oss säga att vi också hämtar en knapp:

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

Låt oss säga att vid ett klick på knappen fylls vår lista med några värden. Som exempel tog jag ett slumpmässigt värde, som motsvarar den aktuella sekunden:

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 ovan kommer nya listpunkter att läggas till efter de som redan finns. Och vi skulle vilja att de tidigare punkterna först tas bort. Lösningen är enkel - vi behöver bara rensa texten i vår tagg ul:

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