Nepareiza vecāka elementa notīrīšanas kļūda JavaScript

Pieņemsim, ka mums ir kāds saraksts. Pieņemsim, ka, nospiežot pogu, mēs vēlamies katru reizi no jauna izveidot šo sarakstu, notīrot tā iepriekšējo saturu. Iesācēji bieži pieļauj kļūdu, mēģinot iedomāties kādu sarežģītu risinājumu. Apskatīsim vienkāršu variantu.

Pieņemsim, ka mēs iegūstam sarakstu mainīgajā:

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

Pieņemsim, ka mēs arī iegūstam pogu:

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

Pieņemsim, ka, nospiežot pogu, mūsu saraksts tiek aizpildīts ar dažām vērtībām. Piemēram, es paņēmu nejaušu vērtību, kas atbilst pašreizējai sekundei:

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

Iepriekš minētajā kodā jauni saraksta punkti tiks pievienoti aiz jau esošajiem. Bet mēs vēlētos, lai iepriekšējie punkti vispirms tiktu noņemti. Risinājums ir vienkāršs - vienkārši jānotīra mūsu ul atzīmes teksts:

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