JavaScript'te Öğe Silme Bağlantısı

Bir paragrafımız olduğunu varsayalım. Onun yanında, bu paragrafı silebileceğimiz bir bağlantı yapalım.

Şu şekilde uygulayalım:

<div id="parent">
	<p id="elem">metin</p>
	<a href="#" id="remove">kaldır</a>
</div>

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

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

Bağlantının href özniteliğinde # olduğuna dikkat edin. Bu kare işareti kaldırırsak - bağlantıyı takip ederiz ve sonuç olarak sayfa yenilenir.

Aslında paragrafın silinmesi de gerçekleşecek, ancak bunu fark etmeyeceğiz çünkü sayfa yenilenecek ve her şey başlangıçtaki haline dönecek.

Sorunu çözmek için preventDefault kullanarak bağlantıyı takip etmeyi engellemek gerekir:

<div id="parent">
	<p id="elem">metin</p>
	<a href="" id="remove">kaldır</a>
</div>

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // bağlantıyı takip etmeyi iptal eder
});

Kendi başınıza, koduma bakmadan, açıklanan sorunu çözün.