Lidhja për fshirjen e elementit në JavaScript

Le të themi se kemi një paragraf. Le të bëjmë pranë saj një lidhje me të cilën ky paragraf mund të fshihet.

Le ta implementojmë:

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

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

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

Kushtojini vëmendje faktit që në atributin href të lidhjes qëndron #. Nëse kjo simbol hiqet - do të marrim një kalim përmes lidhjes dhe, si pasojë, rifreskim të faqes.

Në fakt edhe fshirja e paragrafit do të ndodhë, por ne nuk do ta vërejmë këtë, pasi faqja do të rifreskohet dhe gjithçka do të kthehet në pozitën fillestare.

Për zgjidhjen e problemit është e nevojshme të parandalohet kalimi përmes lidhjes duke përdorur preventDefault:

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

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // anulon kalimin përmes lidhjes
});

Vetë, pa parë në kodin tim, zgjidheni problemin e përshkruar.