JavaScript를 사용하여 DOM(Document Object Model)에서 요소를 삭제하는 방법을 알아보겠습니다. DOM은 HTML 문서의 구조를 나타내는 객체 모델로, 웹 페이지의 요소를 조작하고 제어하는 데 사용됩니다.

1. getElementById() 메서드로 요소 찾기

우선 삭제할 요소를 식별해야 합니다. 보통 getElementById() 메서드를 사용하여 요소의 ID를 통해 해당 요소를 찾습니다.

예를 들어, 아래와 같이 HTML에 ID가 “target”인 요소가 있다고 가정해봅시다.

<div id="target">삭제할 요소</div>

2. removeChild() 메서드로 요소 삭제하기

JavaScript를 사용하여 해당 요소를 삭제하려면 removeChild() 메서드를 사용합니다.

let element = document.getElementById("target");
element.parentNode.removeChild(element);

위 코드에서 getElementById()로 “target” 요소를 찾고, parentNode.removeChild()를 사용하여 해당 요소를 삭제합니다.

3. 요소 삭제 확인

위의 코드를 실행하면 “target” 요소가 DOM에서 삭제됩니다. 따라서 페이지를 새로고침하여 변화를 확인할 수 있습니다.

이것으로 JavaScript를 사용하여 DOM에서 요소를 삭제하는 방법에 대해 알아보았습니다.

더 많은 정보를 원하신다면 MDN Web Docs를 참고하세요.