Odkaz na odstránenie prvku v JavaScripte

Majme odsek. Poďme vedľa neho vytvoriť odkaz, pomocou ktorého bude možné tento odsek odstrániť.

Realizujme:

<div id="parent">
	<p id="elem">text</p>
	<a href="#" id="remove">odstrániť</a>
</div>

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

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

Všimnite si, že v atribúte href odkazu je #. Ak túto mriežku odstránime - dostaneme prechod na odkaz a následne obnovenie stránky.

V skutočnosti sa odstránenie odseku tiež uskutoční, ale nevšimneme si to, pretože stránka sa obnoví a všetko sa vráti do pôvodného stavu.

Na vyriešenie problému je potrebné zabrániť prechodu na odkaz pomocou preventDefault:

<div id="parent">
	<p id="elem">text</p>
	<a href="" id="remove">odstrániť</a>
</div>

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

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

Samostatne, bez nahliadania do môjho kódu, vyriešte opísanú úlohu.