JavaScript-də Element Silme Linki

Tutaq ki, bizim abzas var. Gəlin onun yanında bu abzası silmək üçün istifadə edilə bilən bir link yaradaq.

Reallaşdıraq:

<div id="parent">
	<p id="elem">mətn</p>
	<a href="#" id="remove">sil</a>
</div>

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

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

Diqqət edin ki, linkin href atributunda # işarəsi var. Əgər bu işarəni silsek - linkə keçid əldə edəcəyik və nəticədə, səhifə yenilənəcək.

Əslində abzasın silinməsi də baş verəcək, amma biz bunu hiss etməyəcəyik, çünki səhifə yenilənəcək və hər şey əvvəlki vəziyyətinə qayıdacaq.

Problemi həll etmək üçün preventDefault ilə linkə keçidi dayandırmaq lazımdır:

<div id="parent">
	<p id="elem">mətn</p>
	<a href="" id="remove">sil</a>
</div>

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // linkə keçidi ləğv edirik
});

Müstəqil olaraq, mənim koduma baxmadan, təsvir olunan məsələni həll edin.