A szülő helytelen tisztításának hibája JavaScriptben

Tegyük fel, hogy van egy listánk. Tegyük fel, hogy egy gomb megnyomására minden alkalommal újra szeretnénk létrehozni ezt a listát, megtisztítva az előző tartalmát. A kezdők gyakran elkövetik a hibát, hogy próbálnak valamilyen bonyolult megoldást kitalálni. Nézzünk meg egy egyszerű változatot.

Tegyük fel, hogy a listát egy változóba kapjuk:

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

Tegyük fel, hogy a gombot is megkapjuk:

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

Tegyük fel, hogy a gomb megnyomásakor a listánk kitöltődik néhány értékkel. A példa kedvéért egy véletlenszerű értéket vettem, amely az aktuális másodpercnek felel meg:

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

A fenti kódban az új listaelemek a már meglévők után fognak hozzáadódni. De mi azt szeretnénk, hogy az előző elemek először eltávolításra kerüljenek. A megoldás egyszerű - egyszerűen csak ki kell törölnünk a ul tag szövegét:

btn.addEventListener('click', function() {
	ul.textContent = ''; // megtisztítjuk a listát
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});