JavaScript 요소 삭제 링크

여기에 단락이 있다고 합시다. 그 옆에 이 단락을 삭제할 수 있는 링크를 만들어 봅시다.

구현해 보겠습니다:

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

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

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

링크의 href 속성에 #이 있다는 점에 주목하세요. 이 해시 기호를 제거하면 링크를 클릭했을 때 페이지 이동이 발생하고, 결과적으로 페이지가 새로고침됩니다.

사실 단락 삭제도 일어나지만, 페이지가 새로고침되어 모든 것이 원래 상태로 돌아가기 때문에 우리는 이를 알아차리지 못할 것입니다.

이 문제를 해결하려면 preventDefault를 사용하여 링크 이동을 방지해야 합니다:

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

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

remove.addEventListener('click', function(event) {
  elem.remove();
  event.preventDefault(); // 링크 이동 취소
});