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