Błąd nieprawidłowego czyszczenia rodzica w JavaScript

Załóżmy, że mamy pewną listę. Załóżmy, że po kliknięciu przycisku chcemy za każdym razem od nowa utworzyć tę listę, czyszcząc jej poprzednią zawartość. Początkujący często popełniają błąd, próbując wymyślić jakieś skomplikowane rozwiązanie. Przyjrzyjmy się prostemu wariantowi.

Załóżmy, że pobieramy listę do zmiennej:

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

Załóżmy również, że pobieramy przycisk:

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

Załóżmy, że po kliknięciu przycisku nasza lista wypełnia się pewnymi wartościami. Dla przykładu wziąłem losową wartość, odpowiadającą bieżącej sekundzie:

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

W powyższym kodzie nowe pozycje listy będą dodawane po już istniejących. A my chcielibyśmy, aby poprzednie pozycje zostały najpierw usunięte. Rozwiązanie jest proste - wystarczy po prostu wyczyścić tekst naszego znacznika ul:

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