Gabim i Pastrimit të Përmbajtjes së Prindit në JavaScript

Le të themi se kemi një listë. Le të themi se me një klikim në buton ne duam ta formojmë përsëri këtë listë çdo herë, duke pastruar përmbajtjen e saj të mëparshme. Fillestarët shpesh bëjnë gabim, duke u përpjekur të gjejnë një zgjidhje komplekse. Le të shohim një variant të thjeshtë.

Le të themi se e marrim listën në një ndryshore:

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

Le të themi gjithashtu se e marrim butonin:

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

Le të themi se me një klikim në buton lista jonë mbushet me disa vlera. Për shembull, mora një vlerë të rastësishme, që korrespondon me sekondën aktuale:

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

Në kodin e mësipërm, elementët e rinj të listës do të shtohen pas atyre ekzistues. Por ne do të donim që elementët e mëparshëm të fshiheshin fillimisht. Zgjidhja është e thjeshtë - thjesht duhet të pastrojmë përmbajtjen e tagut tonë ul:

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