ජාවාස්ක්‍රිප්ට් හි දෝෂාත්මක මව් අංග පිරිසිදු කිරීම

අපට යම් ලැයිස්තුවක් ඇතැයි සිතමු. බොත්තමක් ඔබාගත් සෑම අවස්ථාවකම, අපට අවශ්‍ය වන්නේ පෙර අන්තර්ගතය පිරිසිදු කර, මෙම ලැයිස්තුව නැවත නිර්මාණය කිරීමයි. නවකයන් බොහෝ විට දුෂ්කර විසඳුමක් සෙවීමට උත්සාහ කරමින් දෝෂයක් සිදු කරයි. අපි සරල විකල්පයක් බලමු.

අපි විචල්‍යයකට ලැයිස්තුව ලබා ගනිමු යැයි සිතමු:

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