Грешка при погрешно чистење на родител во JavaScript

Да претпоставиме дека имаме одредена листа. Да претпоставиме дека при клик на копче сакаме секој пат повторно да ја формираме оваа листа, отстранувајќи ја нејзината претходна содржина. Почетниците често прават грешка обидувајќи се да смислат некое сложено решение. Ајде да погледнеме едно едноставно решение.

Да претпоставиме дека ја добиваме листата во променлива:

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

Да претпоставиме дека го добиваме и копчето:

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

Да претпоставиме дека при клик на копче нашата листа се пополнува со одредени вредности. За пример ја зедов случајната вредност, која одговара на тековната секунда:

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

Во горенаведениот код, новите ставки од листата ќе се додаваат по веќе постоечките. А ние би сакале претходните ставки прво да се отстранат. Решението е едноставно - само треба да го исчистиме текстот на нашиот таг ul:

btn.addEventListener('click', function() {
	ul.textContent = ''; // ја чистиме листата
	let rand = new Date.getSeconds();
	
	for (let i = 0; i <= rand; i++) {
		let li = document.createElement('li');
		li.textContent = i;
		ul.append(li);
	}
});