JavaScript로 웹 페이지의 DOM을 조작하다 보면 특정 HTML 요소를 화면에서 제거해야 하는 경우가 자주 발생합니다. 이때 가장 대표적으로 사용되는 메서드가 바로 removeChild()입니다.
removeChild() 메서드란?
removeChild()는 부모 요소(parent element)에서 자식 요소(child element)를 삭제하는 DOM 메서드입니다. 즉, 어떤 요소든 해당 요소의 부모 노드를 통해 접근하여 제거할 수 있습니다.
문법(Syntax)
removeChild(element);
이 메서드는 매개변수로 제거하고자 하는 요소(element)를 전달받아, 해당 요소를 DOM 트리에서 삭제합니다.
사용 예제
다음 예제에서는 div 영역 안에 처음에 두 개의 텍스트(<p> 태그)가 존재합니다. 그러나 removeChild() 메서드가 실행되면 그중 하나의 텍스트가 제거되어 div 영역에는 하나의 텍스트만 남게 됩니다. 최종 출력 결과에는 남아 있는 텍스트만 표시됩니다.
<html>
<body>
<div id="new">
<p id="p1">Tutorix</p>
<p id="p2">Tutorialspoint</p>
</div>
<script>
var parent = document.getElementById("new");
var child = document.getElementById("p1");
parent.removeChild(child);
</script>
</body>
</html>실행 결과(Output)
Tutorialspoint
코드 설명
위 코드의 동작 순서는 다음과 같습니다.
1. getElementById("new")를 통해 부모 역할을 할 div 요소를 가져옵니다.
2. getElementById("p1")을 통해 제거 대상인 <p id="p1">Tutorix</p> 요소를 가져옵니다.
3. parent.removeChild(child)를 호출하여 부모 요소에서 자식 요소를 삭제합니다.
참고: 더 간단한 remove() 메서드
최신 브라우저에서는 Element.remove() 메서드를 사용하면 부모 요소를 따로 참조하지 않고도 해당 요소를 직접 제거할 수 있습니다.
document.getElementById("p1").remove();다만 구형 브라우저(예: Internet Explorer)와의 호환성이 필요하다면 removeChild() 방식을 사용하는 것이 안전합니다.