Kiungo cha Kufuta Kipengele kwa JavaScript

Hebu tuwe na aya. Hebu tufanye kiungo karibu nayo, ambacho kutumia hiki kiungo kutaweza kufuta hii aya.

Tutatekeleza:

<div id="parent">
	<p id="elem">maandishi</p>
	<a href="#" id="remove">futa</a>
</div>

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

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

Zingatia kuwa katika sifa href ya kiungo kuna #. Ikiwa utaondoa alama hii ya # -tutapata mabadiliko ya kiungo na, kwa hiyo, upya wa ukurasa.

Kwa kweli ufutaji wa aya pia utafanyika, lakini hatutaona, kwani ukurasa utasasishwa na kila kitu kitarejea kwenye hali yake ya kawaida .

Ili kutatua tatizo ni lazima kuzuia mabadiliko ya kiungo kwa kutumia preventDefault:

<div id="parent">
	<p id="elem">maandishi</p>
	<a href="" id="remove">futa</a>
</div>

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // kughairi mabadiliko ya kiungo
});

Wewe mwenyewe, bila kuangalia kwenye msimbo wangu, tatua tatizo lililoelezewa.