Erro de Limpeza Incorreta do Elemento Pai em JavaScript

Suponha que temos uma lista. Suponha que ao clicar em um botão queremos reformar essa lista toda vez, limpando seu conteúdo anterior. Iniciantes frequentemente cometem o erro de tentar inventar uma solução complicada. Vamos ver uma opção simples.

Suponha que obtemos a lista em uma variável:

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

Suponha que também obtemos um botão:

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

Suponha que ao clicar no botão, nossa lista seja preenchida com alguns valores. Para o exemplo, peguei um valor aleatório, correspondente ao segundo atual:

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

No código acima, novos itens da lista serão adicionados após os já existentes. E nós gostaríamos que os itens anteriores fossem primeiro removidos. A solução é simples - precisamos apenas limpar o texto da nossa tag ul:

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