জাভাস্ক্রিপ্টে নতুন উপাদানের স্ব-মুছে ফেলা

পূর্ববর্তী পাঠে, আমরা শিখেছি কিভাবে ক্লিক করলে উপাদানগুলি নিজেকে মুছে ফেলতে পারে।

এখন মনে করুন প্রারম্ভে প্যারেন্টে কোন উপাদান নেই:

<div id="parent"></div>

আসুন একটি লুপে 9টি নতুন প্যারাগ্রাফ তৈরি করি, এবং এমনভাবে করি যাতে যেকোনো প্যারাগ্রাফে ক্লিক করলে সেটি মুছে যায়:

let parent = document.querySelector('#parent');

for (let i = 1; i <= 9; i++) {
	let p = document.createElement('p');
	p.textContent = i;
	
	p.addEventListener('click', function() {
		this.remove();
	});
	
	parent.appendChild(p);
}

নিচের কোডটি দেওয়া আছে:

<ul id="parent">
	<li>1</li>
	<li>2</li>
	<li>3</li>
</ul>

<input type="submit" id="button">

এমনভাবে করুন যাতে বাটনে ক্লিক করলে তালিকায় একটি নতুন উপাদান যোগ হয়। এমনভাবে করুন যে যেকোনো li এ ক্লিক করলে সেটি মুছে যায়। এটি সেই সমস্ত li এর ক্ষেত্রে প্রযোজ্য যা ইতিমধ্যেই তালিকায় আছে, সেইসাথে নতুনগুলি, বাটনে ক্লিক করার পরে তৈরি হয়েছে।