জাভাস্ক্রিপ্টে ভুল প্যারেন্ট ক্লিয়ার করার ত্রুটি

ধরুন আমাদের কাছে একটি নির্দিষ্ট তালিকা আছে। একটি বাটনে ক্লিক করলে আমরা চাই প্রতিবার এই তালিকাটি আগের বিষয়বস্তু মুছে দিয়ে পুনরায় তৈরি করি। নবীনরা প্রায়শই একটি জটিল সমাধান নিয়ে আসার চেষ্টা করে ভুল করে। আসুন একটি সহজ বিকল্প দেখি।

ধরুন আমরা একটি ভেরিয়েবলে তালিকাটি পাই:

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