Neteisingo JavaScript DOM elemento tėvinio elemento valymo klaida

Tarkime, kad turime tam tikrą sąrašą. Tarkime, kad paspaudus mygtuką mes norime kiekvieną kartą iš naujo suformuoti šį sąrašą, išvalydami ankstesnį jo turinį. Pradedantieji dažnai daro klaidą, bandydami sugalvoti kokį nors sudėtingą sprendimą. Pažiūrėkime paprastą variantą.

Tarkime, kad sąrašą gauname į kintamąjį:

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

Tarkime, kad taip pat gauname mygtuką:

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

Tarkime, kad paspaudus mygtuką mūsų sąrašas užpildomas tam tikromis reikšmėmis. Pavyzdžiui, paėmiau atsitiktinę reikšmę, atitinkančią dabartinę sekundę:

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

Pateiktame aukščiau kode, nauji sąrašo punktai bus pridedami po jau egzistuojančių. O mes norėtume, kad ankstesni punktai pirmiausia būtų pašalinti. Sprendimas paprastas - reikia tiesiog išvalyti mūsų ul žymės tekstą:

btn.addEventListener('click', function() {
	ul.textContent = ''; // valome sąrašą
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});