Elem törlésére szolgáló hivatkozás JavaScriptben

Tegyük fel, hogy van egy bekezdésünk. Készítsünk mellé egy hivatkozást, amellyel ez a bekezdés törölhető lesz.

Valósítsuk meg:

<div id="parent">
	<p id="elem">szöveg</p>
	<a href="#" id="remove">törlés</a>
</div>

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

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

Figyeljük meg, hogy a hivatkozás href attribútumában egy # szerepel. Ha ezt a kettőskeresztet eltávolítjuk - a hivatkozásra kattintva átnavigálunk, ami az oldal frissülését eredményezi.

Valójában a bekezdés törlése is megtörténne, de ezt nem fogjuk észrevenni, mivel az oldal frissül és minden visszaáll az eredeti állapotába.

A probléma megoldásához meg kell akadályoznunk a hivatkozásra való navigálást a preventDefault segítségével:

<div id="parent">
	<p id="elem">szöveg</p>
	<a href="" id="remove">törlés</a>
</div>

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // megakadályozzuk a navigálást a hivatkozásra
});

Oldja meg a leírt feladatot önállóan, anélkül, hogy belenézne a kódomba.