Elemendi kustutamise link JavaScriptis

Oletame, et meil on lõik. Teeme selle kõrvale lingi, mille abil saab seda lõigu kustutada.

Rakendame:

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

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

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

Pange tähele, et lingi href atribuudis on #. Kui see trellid eemaldada - saame lingile mineku ja selle tulemusena lehe uuenemise.

Tegelikult toimub ka lõigu kustutamine, kuid me ei märka seda, kuna leht uueneb ja kõik naaseb algseisse seisu.

Probleemi lahendamiseks tuleb takistada lingile minek kasutades preventDefault:

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

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // tühistame lingile mineku
});

Ise, minu koodi peale vahtimata, lahendage kirjeldatud ülesanne.