Грешка у неправилном чишћењу родитеља у 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);
	}
});