Erreur de nettoyage incorrect du parent en JavaScript

Supposons que nous ayons une certaine liste. Supposons que lors d'un clic sur un bouton, nous voulons à chaque fois reformer cette liste, en effaçant son contenu précédent. Les débutants commettent souvent l'erreur d'essayer de trouver une solution complexe. Regardons une option simple.

Supposons que nous obtenons la liste dans une variable :

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

Supposons également que nous obtenons le bouton :

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

Supposons que lors d'un clic sur le bouton, notre liste se remplit avec certaines valeurs. Pour l'exemple, j'ai pris une valeur aléatoire, correspondant à la seconde actuelle :

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

Dans le code ci-dessus, les nouveaux éléments de liste seront ajoutés après ceux existants. Alors que nous voudrions que les éléments précédents soient d'abord supprimés. La solution est simple - il suffit simplement de vider le texte de notre balise ul :

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