JavaScript에서 DOM 요소의 자식 노드를 제거하려면 removeChild() 메서드를 사용하면 됩니다. 이 메서드는 부모 노드에서 지정한 자식 노드를 삭제하며, 제거된 노드를 반환합니다. 아래는 버튼을 클릭하면 목록의 첫 번째 항목을 삭제하는 간단한 예제입니다.
예제
<!DOCTYPE html>
<html lang="ko">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Document</title>
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}
.result {
font-size: 20px;
font-weight: 500;
}
</style>
</head>
<body>
<h1>JavaScript로 HTML 자식 노드 제거하기</h1>
<div style="color: green;" class="result">
<ul class="animal">
<li>Cow</li>
<li>Lion</li>
<li>Tiger</li>
<li>Buffalo</li>
</ul>
</div>
<button class="Btn">CLICK HERE</button>
<h3>
위 버튼을 클릭하면 목록에서 첫 번째 항목이 제거됩니다.
</h3>
<script>
let resEle = document.querySelector(".result");
let animalList = document.querySelector(".animal");
document.querySelector(".Btn").addEventListener("click", () => {
animalList.removeChild(animalList.childNodes[0]);
});
</script>
</body>
</html>
출력 결과
위 코드를 실행하면 다음과 같은 화면이 표시됩니다.
'CLICK HERE' 버튼을 클릭하면 목록의 첫 번째 항목(Cow)이 제거된 것을 확인할 수 있습니다.
참고 사항
childNodes 속성은 요소 노드뿐만 아니라 줄바꿈이나 공백으로 인한 텍스트 노드까지 포함합니다. 따라서 위 예제처럼 childNodes[0]에 공백 텍스트 노드가 들어 있으면 의도한 요소가 제거되지 않을 수 있습니다.
요소 노드만 정확하게 다루고 싶다면 다음 방법을 사용하는 것이 좋습니다.
firstElementChild: 첫 번째 자식 요소만 선택children[0]: 요소 노드만 포함하는 컬렉션 접근
animalList.removeChild(animalList.firstElementChild);
또한 최신 브라우저에서는 부모 노드 참조 없이 해당 노드를 직접 제거할 수 있는 node.remove() 메서드도 지원하므로, 상황에 맞게 활용하면 더욱 간결한 코드를 작성할 수 있습니다.