JavaScriptでの要素削除リンク

段落があるとします。その横に、その段落を削除できるリンクを作ってみましょう。

実装します：

<div id="parent">
	<p id="elem">テキスト</p>
	<a href="#" id="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">テキスト</p>
	<a href="" id="remove">削除</a>
</div>

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

remove.addEventListener('click', function(event) {
	elem.remove();
	event.preventDefault(); // リンク遷移をキャンセル
});

私のコードを見ずに、自分自身で説明されたタスクを解決してください。