Linkki elementin poistamiseen JavaScriptillä

Oletetaan, että meillä on kappale. Tehdään sen viereen linkki, jolla tämä kappale voidaan poistaa.

Toteutetaan:

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

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

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

Huomaa, että linkin href-attribuutissa on #. Jos tämä risuaita poistetaan - saamme linkin seuraamisen ja seurauksena sivun päivityksen.

Itse asiassa kappaleen poistaminen tapahtuu myös, mutta emme huomaa sitä, koska sivu päivittyy ja kaikki palaa alkuperäiseen tilaan.

Ongelman ratkaisemiseksi on estettävä linkin seuraaminen käyttämällä preventDefault:

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

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // estetään linkin seuraaminen
});

Ratkaise itsenäisesti, katsomatta koodiini, kuvattu tehtävä.