JavaScript-də valideyn təmizləmə xətası

Tutaq ki, bizim müəyyən bir siyahımız var. Düyməni kliklədikdə hər dəfə bu siyahını əvvəlki məzmununu təmizləyərək yenidən yaratmaq istəyirik. Yeni başlayanlar tez-tez mürəkkəb həll tapmağa çalışaraq səhv edirlər. Gəlin sadə variantı nəzərdən keçirək.

Tutaq ki, siyahını dəyişənə alırıq:

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

Tutaq ki, həmçinin düyməni də alırıq:

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

Tutaq ki, düyməni kliklədikdə bizim siyahımız bəzi dəyərlərlə doldurulur. Nümunə üçün mən cari saniyəyə uyğun gələn təsadüfi bir dəyər götürdü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);
	}
});

Yuxarıda göstərilən kodda, yeni siyahı bəndləri artıq mövcud olanlardan sonra əlavə olunacaq. Biz isə istəyirik ki, əvvəlki bəndlər əvvəlcə silinsin. Həll sadədir - sadəcə ul teqimizin mətnini təmizləmək lazımdır:

btn.addEventListener('click', function() {
	ul.textContent = ''; // siyahını təmizləyirik
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});