JavaScript ရှိ အရာဝတ္ထုများကို ဖျက်ရန် လင့်ခ်

ကျွန်ုပ်တို့တွင် စာပိုဒ်တစ်ခု ရှိသည်ဆိုပါစို့။ ၎င်းနှင့်ကပ်လျက် ထိုစာပိုဒ်ကို ဖျက်ပစ်နိုင်သော လင့်ခ်တစ်ခုကို လုပ်ကြည့်ကြပါစို့။

အကောင်အထည်ဖော်ကြပါစို့။

html<div id="parent">
  <p id="elem">စာသား</p>
  <a href="#" id="remove">ဖယ်ရှားမည်</a>
</div>

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

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

လင့်ခ်၏ href attribute တွင် # ရှိသည်ကို သတိပြုပါ။ ဤ # ကို ဖယ်ရှားလိုက်ပါက လင့်ခ်ကို နှိပ်သွားခြင်းနှင့် ၎င်း၏ အကျိုးဆက်အနေဖြင့် စာမျက်နှာ ပြန်လည်စတင်ခြင်း ဖြစ်ပေါ်လိမ့်မည်။

တကယ်တော့ စာပိုဒ်ကို ဖျက်ခြင်းလည်း ဖြစ်ပေါ်လိမ့်မည်၊ သို့သော် ကျွန်ုပ်တို့သည် ၎င်းကို သတိမထားမိပါ၊ အဘယ့်ကြောင့်ဆိုသော် စာမျက်နှာ ပြန်လည်စတင်သွားပြီး အရာအားလုံး မူလအနေအထားသို့ ပြန်ရောက်သွားမည် ဖြစ်သောကြောင့်ပင်။

ဤပြဿနာကို ဖြေရှင်းရန် preventDefault ကို အသုံးပြု၍ လင့်ခ်ပေါ်သို့ သွားခြင်းကို တားဆီးရန် လိုအပ်ပါသည်။

html<div id="parent">
  <p id="elem">စာသား</p>
  <a href="" id="remove">ဖယ်ရှားမည်</a>
</div>

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // လင့်ခ်ပေါ်သို့ သွားခြင်းကို ပယ်ဖျက်သည်
});