JavaScript로 DOM 요소를 제거하고 숨기는 2가지 방법

DOM 요소를 다루기 전에 확인할 것

JavaScript를 사용하면 DOM에서 요소를 빠르게 제거하거나 숨길 수 있습니다. 구체적인 방법은 크게 두 가지인데, 시작하기 전에 먼저 스스로에게 이렇게 물어보세요. "이 요소를 나중에 다시 사용해야 할까?"

답에 따라 적절한 방법이 달라집니다.

1. 요소를 다시 보여줘야 한다면 — 숨기기(Hide)

답이 "그렇다"라면 요소를 완전히 삭제하지 말고 style 속성을 이용해 화면에서만 숨기는 것이 좋습니다.

const hideElement = document.querySelector('#element-to-hide')
hideElement.style.display = 'none'

display 속성을 'none'으로 설정하면 해당 요소는 화면에서 사라지지만 DOM에는 그대로 남아 있기 때문에, 언제든 값을 되돌려 다시 표시할 수 있습니다.

2. 요소를 영구적으로 없애고 싶다면 — 삭제(Remove)

반대로 요소를 다시 가져올 필요가 전혀 없다면, 아래 방법으로 DOM에서 완전히 제거하는 것이 깔끔합니다.

const removeElement = document.querySelector('#element-to-remove')
removeElement.parentNode.removeChild(removeElement)

removeChild()는 부모 노드를 통해 자식 요소를 삭제하는 전통적인 방식입니다. 참고로 최신 브라우저에서는 더 간단한 element.remove() 메서드도 지원되므로 상황에 맞게 활용하면 됩니다.

querySelector 선택자 기본 규칙

querySelector()로 요소를 선택할 때는 선택자 문법을 정확히 사용해야 합니다.

• # : ID 속성을 가진 요소를 선택할 때 사용합니다.
• . : 클래스(class)를 가진 요소를 선택할 때 사용합니다.