Link per eliminare un elemento in JavaScript

Supponiamo di avere un paragrafo. Creiamo accanto ad esso un link, tramite il quale sarà possibile eliminare questo paragrafo.

Implementiamo:

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

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

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

Notate che nell'attributo href del link c'è #. Se questo cancelletto viene rimosso - otterremo un seguito del link e, di conseguenza, un aggiornamento della pagina.

In realtà avverrà anche l'eliminazione del paragrafo, ma non lo noteremo, poiché la pagina si aggiornerà e tutto tornerà alla posizione iniziale.

Per risolvere il problema è necessario prevenire il seguito del link tramite preventDefault:

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

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // annulla il seguito del link
});

In autonomia, senza guardare il mio codice, risolvete il problema descritto.