JavaScript တွင် မိဘ element ကို မှားယွင်းစွာ ရှင်းလင်းခြင်း အမှား

ကျွန်ုပ်တို့မှာ အချို့သော စာရင်းတစ်ခု ရှိသည်ဆိုပါစို့။ ခလုတ်တစ်ခုကို နှိပ်လိုက်တိုင်း ထိုစာရင်း၏ ယခင်ပါဝင်မှုများကို ရှင်းလင်းပြီး ထိုစာရင်းကို အသစ်ပြန်လည် ဖွဲ့စည်းလိုသည်ဆိုပါစို့။ အစပြုလေ့လာသူများသည် အချို့သော ရှုပ်ထွေးသည့် ဖြေရှင်းနည်းကို စဉ်းစားရန် ကြိုးစားရင်း မကြာခဏ အမှားလုပ်တတ်ကြသည်။ ရိုးရှင်းသော ရွေးချယ်စရာကို ကြည့်ကြရအောင်။

ကျွန်ုပ်တို့ စာရင်းကို ကိန်းရှင်ထဲ ရယူသည်ဆိုပါစို့:

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 tag ၏ စာသားကို ရှင်းလင်းရန် လိုအပ်သည်:

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