Fehler bei falschem Löschen des Eltern-Elements in JavaScript

Nehmen wir an, wir haben eine bestimmte Liste. Nehmen wir an, wir möchten bei jedem Klick auf einen Button diese Liste jedes Mal neu erstellen, indem wir ihren vorherigen Inhalt löschen. Anfänger machen oft den Fehler, zu versuchen, eine komplizierte Lösung zu finden. Sehen wir uns eine einfache Variante an.

Nehmen wir an, wir erhalten die Liste in einer Variable:

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

Nehmen wir an, wir erhalten auch den Button:

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

Nehmen wir an, bei einem Klick auf den Button soll sich unsere Liste mit bestimmten Werten füllen. Als Beispiel habe ich einen Zufallswert genommen, der der aktuellen Sekunde entspricht:

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

Im obigen Code werden neue Listeneinträge nach den bereits existierenden hinzugefügt. Wir möchten aber, dass die vorherigen Einträge zuerst entfernt werden. Die Lösung ist einfach - wir müssen einfach den Text unseres Tags ul leeren:

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