Tautan untuk Menghapus Elemen dengan JavaScript

Misalkan kita memiliki sebuah paragraf. Mari kita buat sebuah tautan di sebelahnya, yang dapat digunakan untuk menghapus paragraf tersebut.

Mari kita implementasikan:

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

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

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

Perhatikan bahwa pada atribut href tautan terdapat tanda #. Jika tanda pagar ini dihapus - kita akan mendapatkan navigasi melalui tautan dan, sebagai konsekuensinya, penyegaran halaman.

Sebenarnya, penghapusan paragraf juga akan terjadi, tetapi kita tidak akan menyadarinya, karena halaman akan disegarkan dan semuanya akan kembali ke posisi semula.

Untuk mengatasi masalah ini, perlu untuk mencegah navigasi melalui tautan dengan menggunakan preventDefault:

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

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // membatalkan navigasi melalui tautan
});