Връзка за изтриване на елемент в JavaScript

Да предположим, че имаме абзац. Нека до него направим връзка, с помощта на която този абзац може да бъде изтрит.

Нека реализираме:

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

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

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

Обърнете внимание, че в атрибута href на връзката има #. Ако премахнем тази диез - ще получим преход по връзката и, като следствие, презареждане на страницата.

Всъщност изтриването на абзаца също ще се случи, но ние няма да го забележим, тъй като страницата ще се презареди и всичко ще се върне в първоначалното си състояние.

За решаване на проблема трябва да предотвратим прехода по връзката с помощта на preventDefault:

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

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // отменяме прехода по връзката
});

Самостоятелно, без да надничате в моя код, решете описаната задача.