Pautan untuk Memadam Elemen dalam JavaScript

Katakan kita ada satu perenggan. Mari buat satu pautan di sebelahnya, yang boleh digunakan untuk memadam perenggan ini.

Mari laksanakannya:

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

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

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

Perhatikan bahawa dalam atribut href pautan terdapat tanda #. Jika tanda # ini dibuang - kita akan mendapat navigasi melalui pautan dan, akibatnya, halaman akan dimuat semula.

Sebenarnya, pemadaman perenggan juga akan berlaku, tetapi kita tidak akan menyedarinya kerana halaman dimuat semula dan semuanya kembali ke keadaan asal.

Untuk menyelesaikan masalah ini, kita perlu mencegah navigasi melalui pautan menggunakan preventDefault:

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

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

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

Secara berdikari, tanpa melihat kod saya, sila selesaikan masalah yang diterangkan.