Länk för att ta bort element i JavaScript

Låt oss säga att vi har ett stycke. Låt oss skapa en länk bredvid den, med vilken detta stycke kan tas bort.

Låt oss implementera:

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

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

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

Var uppmärksam på att det står # i länkens href-attribut. Om man tar bort detta # - får vi en länkförflyttning och, som en följd, siduppdatering.

Egentligen kommer borttagningen av stycket också att ske, men vi kommer inte att märka det, eftersom sidan uppdateras och allt återgår till utgångsläget.

För att lösa problemet måste man förhindra länkförflyttning med preventDefault:

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

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // avbryter länkförflyttning
});

Lös den beskrivna uppgiften på egen hand, utan att kolla på min kod.