JavaScript-এ এলিমেন্ট মুছে ফেলার লিঙ্ক

ধরুন আমাদের কাছে একটি প্যারাগ্রাফ আছে। এর পাশেই একটি লিঙ্ক তৈরি করা যাক, যার সাহায্যে এই প্যারাগ্রাফটি মুছে ফেলা যাবে।

বাস্তবায়ন করা যাক:

html<div id="parent">
  <p id="elem">text</p>
  <a href="#" id="remove">remove</a>
</div>

javascriptlet elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function() {
  elem.remove();
});

লিঙ্কের href অ্যাট্রিবিউটে # আছে সেদিকে খেয়াল করুন। যদি এই হ্যাশটি সরানো হয় - আমরা লিঙ্কে ক্লিক করলে পেজ রিফ্রেশ হয়ে যাবে।

আসলে প্যারাগ্রাফটি মুছে ফেলাও ঘটবে, কিন্তু আমরা তা লক্ষ্য করব না, কারণ পৃষ্ঠাটি রিফ্রেশ হয়ে যাবে এবং সবকিছু আবার আগের অবস্থায় ফিরে যাবে।

সমস্যার সমাধানের জন্য preventDefault ব্যবহার করে লিঙ্কে ক্লিক করার ডিফল্ট行为 বন্ধ করতে হবে:

html<div id="parent">
  <p id="elem">text</p>
  <a href="" id="remove">remove</a>
</div>

javascriptlet elem   = document.querySelector('#elem');
let remove = document.querySelector('#remove');

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // লিঙ্কে ক্লিক করা বাতিল করি
});