Virheellisen vanhemman elementin tyhjentämisvirhe JavaScriptissä

Oletetaan, että meillä on jokin lista. Oletetaan, että painiketta painamalla haluamme muodostaa tämän listan uudelleen joka kerta, tyhjentäen sen aiemman sisällön. Aloittelijat usein tekevät virheen yrittäessään keksiä jotain monimutkaista ratkaisua. Katsotaanpa yksinkertaista vaihtoehtoa.

Oletetaan, että saamme listan muuttujaan:

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

Oletetaan myös, että saamme painikkeen:

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

Oletetaan, että painiketta painamalla listamme täyttyy joillakin arvoilla. Esimerkiksi otin satunnaisen arvon, joka vastaa nykyistä sekuntia:

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

Yllä olevassa koodissa uudet listakohdat lisätään jo olemassa olevien jälkeen. Mutta me haluaisimme, että edelliset kohdat poistettaisiin ensin. Ratkaisu on yksinkertainen - täytyy vain tyhjentää ul-tagimme teksti:

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