Link pentru ștergerea elementului în JavaScript

Să presupunem că avem un paragraf. Să creăm lângă el un link, cu ajutorul căruia acest paragraf poate fi șters.

Să implementăm:

<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();
});

Atenție la faptul că în atributul href linkului se află #. Dacă eliminăm acest semn diez - vom obține o navigare prin link și, ca urmare, reîmprospătarea paginii.

De fapt, ștergerea paragrafului tot va avea loc, dar nu vom observa acest lucru, deoarece pagina se va reîmprospăta și totul va reveni la poziția inițială.

Pentru a rezolva problema, trebuie să împiedicăm navigarea prin link cu ajutorul lui 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(); // anulăm navigarea prin link
});

Singur, fără a privi în codul meu, rezolvați problema descrisă.