JavaScriptda elementni o'chirish havolasi

Bizda abzats bor deb faraz qilaylik. Keling, uning yoniga shu abzatsni o'chirish mumkin bo'lgan havola yasaymiz.

Amalga oshiramiz:

html<div id="parent">
  <p id="elem">matn</p>
  <a href="#" id="remove">o'chirish</a>
</div>

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

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

E'tibor bering, havolaning href atributida # belgisi turipti. Agar bu belgini olib tashlasak - havola bo'yicha o'tish (redirect) sodir bo'ladi va natijada sahifa yangilanadi.

Aslida abzatsni o'chirish ham amalga oshadi, lekin biz buni sezmaymiz, chunki sahifa yangilanadi va hamma narsa boshlang'ich holatiga qaytadi.

Muammoni hal qilish uchun preventDefault yordamida havola bo'yicha o'tishni oldini olish kerak:

html<div id="parent">
  <p id="elem">matn</p>
  <a href="" id="remove">o'chirish</a>
</div>

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // havola bo'yicha o'tishni bekor qilamiz
});