JavaScript-de element aýyrmak üçin baglanyşyk

Bizde bir abzas bolsun. Onuň ýanynda, bu abzasy aýyryp boljak baglanyşyk edeliň.

Amala aşyryň:

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();
});

Baglanyşygyň href atributynda # belgisi bar bolandygyna üns beriň. Eger bu reşetkany aýyrsak - biz baglanyşyk boýunça geçiş we netijede, sahypanyň täzelenmegini alarys.

Aslynda, abzasyň aýyrylmagy hem boljak, ýöne biz ony sezmäris, sebäbi sahypa täzelenjek we hemmesi başlangyç ýagdaýyna gaýdyp geljek.

Bu meseleni çözmek üçin preventDefault ulanmak bilen baglanyşyk boýunça geçişiň öňüni almaly:

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(); // baglanyşyk boýunça geçişi ýatyrýarys
});