जावास्क्रिप्ट में तत्व हटाने के लिए लिंक

मान लीजिए हमारे पास एक पैराग्राफ है। आइए इसके बगल में एक लिंक बनाएं, जिसकी मदद से इस पैराग्राफ को हटाया जा सके।

आइए इसे लागू करें:

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(); // लिंक पर क्लिक करने पर होने वाले डिफॉल्ट एक्शन को रोकता है
});