Odkaz na odstranění elementu v JavaScriptu

Předpokládejme, že máme odstavec. Vytvořme vedle něj odkaz, pomocí kterého bude možné tento odstavec odstranit.

Realizujme:

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

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

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

Všimněte si, že v atributu href odkazu je #. Pokud tuto mřížku odstraníme - dostaneme přechod na odkaz a v důsledku toho obnovení stránky.

Ve skutečnosti dojde také k odstranění odstavce, ale nevšimneme si toho, protože stránka se obnoví a vše se vrátí do původního stavu.

Pro vyřešení problému je třeba zabránit přechodu na odkaz pomocí preventDefault:

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

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // zrušíme přechod na odkaz
});

Samostatně, bez nahlížení do mého kódu, vyřešte popsaný úkol.