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(); // 링크 이동 취소
});

제 코드를 보지 말고 설명된 문제를 스스로 해결해 보세요.