Greška u neispravnom čišćenju roditeljskog elementa u JavaScriptu

Pretpostavimo da imamo neku listu. Pretpostavimo da želimo da pritiskom na dugme svaki put ponovo formiramo ovu listu, očistivši njen prethodni sadržaj. Početnici često prave grešku pokušavajući da smisle neko komplikovano rešenje. Pogledajmo jednostavnu varijantu.

Pretpostavimo da dobijamo listu u promenljivu:

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

Pretpostavimo da takođe dobijamo dugme:

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

Pretpostavimo da se pritiskom na dugme naša lista popuni nekim vrednostima. Za primer sam uzeo slučajnu vrednost, koja odgovara trenutnoj sekundi:

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

U gore prikazanom kodu, nove stavke liste će se dodavati posle već postojećih. A mi bismo želeli da se prethodne stavke prvo obrišu. Rešenje je jednostavno - potrebno je samo da očistimo tekst našeg taga ul:

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