JavaScript'te Ebeveyn Temizleme Hatası

Bir listemiz olduğunu varsayalım. Bir butona her tıklandığında, bu listeyi önceki içeriğini temizleyerek yeniden oluşturmak istiyoruz. Yeni başlayanlar genellikle karmaşık bir çözüm bulmaya çalışırken hata yaparlar. Basit bir seçeneğe bakalım.

Listeyi bir değişkene aldığımızı varsayalım:

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

Ayrıca butonu da aldığımızı varsayalım:

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

Butona her tıklandığında listemizin bazı değerlerle doldurulduğunu varsayalım. Örnek olarak, mevcut saniyeye karşılık gelen rastgele bir değer aldım:

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

Yukarıdaki kodda, yeni liste öğeleri zaten var olanların ardına eklenecektir. Oysaki biz önceki öğelerin silinmesini istiyoruz. Çözüm basit - sadece ul etiketimizin metnini temizlememiz gerekiyor:

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