Errore di pulizia errata del genitore in JavaScript

Supponiamo di avere un certo elenco. Supponiamo che alla pressione di un pulsante vogliamo ricostruire questo elenco ogni volta, ripulendo il suo contenuto precedente. I principianti spesso commettono l'errore di cercare di trovare una soluzione complessa. Diamo un'occhiata a una soluzione semplice.

Supponiamo di ottenere l'elenco in una variabile:

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

Supponiamo anche di ottenere un pulsante:

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

Supponiamo che alla pressione del pulsante il nostro elenco venga popolato con alcuni valori. Per l'esempio ho preso un valore casuale, corrispondente al secondo corrente:

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

Nel codice sopra, i nuovi elementi dell'elenco verranno aggiunti dopo quelli già esistenti. Ma noi vorremmo che le voci precedenti vengano prima rimosse. La soluzione è semplice: basta semplicemente pulire il testo del nostro tag ul:

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