Eroare de curățare incorectă a părintelui în JavaScript

Să presupunem că avem o anumită listă. Să presupunem că la click pe buton vrem de fiecare dată să formăm din nou această listă, curățând conținutul ei anterior. Începătorii fac adesea greșeala de a încerca să găsească o soluție complicată. Să vedem o variantă simplă.

Să presupunem că obținem lista într-o variabilă:

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

Să presupunem că obținem și butonul:

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

Să presupunem că la click pe buton lista noastră se completează cu anumite valori. Pentru exemplu, am luat o valoare aleatoare, corespunzătoare secundei curente:

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

În codul de mai sus, noile elemente de listă vor fi adăugate după cele existente deja. Și noi am vrea ca elementele anterioare să fie mai întâi șterse. Soluția este simplă - trebuie doar să curățăm textul tag-ului nostru ul:

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