removeChild() 메서드란?
HTML DOM의 removeChild() 메서드는 지정한 부모 노드에서 특정 자식 노드를 삭제하고, 삭제된 노드를 반환하는 메서드입니다. 웹 페이지에서 동적으로 요소를 제거해야 할 때 가장 많이 사용되는 기본 DOM 조작 API 중 하나입니다.
이 메서드는 노드를 단순히 화면에서 숨기는 것이 아니라 DOM 트리에서 실제로 분리하며, 반환값을 변수에 저장하면 나중에 다른 위치에 다시 삽입하는 것도 가능합니다.
문법(Syntax)
removeChild() 메서드의 기본 문법은 다음과 같습니다.
node.removeChild(childNode);
매개변수 설명:
- node – 삭제할 자식 노드를 포함하고 있는 부모 노드
- childNode – 제거하고자 하는 자식 노드
만약 전달한 노드가 해당 부모의 자식이 아니라면 NotFoundError 예외가 발생합니다.
예제 코드
버튼을 클릭할 때마다 과목 목록에서 항목을 하나씩 삭제하는 예제입니다.
<!DOCTYPE html>
<html>
<head>
<style>
html{
height:100%;
}
body{
text-align:center;
color:#fff;
background: linear-gradient(62deg, #FBAB7E 0%, #F7CE68 100%) center/cover no-repeat;
height:100%;
}
p{
font-weight:700;
font-size:1.2rem;
}
ul{
list-style-type: none;
padding:0;
}
.btn{
background:#0197F6;
border:none;
height:2rem;
border-radius:2px;
width:50%;
margin:2rem auto;
display:block;
color:#fff;
outline:none;
cursor:pointer;
}
</style>
</head>
<body>
<h1>학생 과목 목록</h1>
<p>안녕하세요! 제가 좋아하는 과목은:</p>
<ul id="subjectList">
<li>물리</li>
<li>화학</li>
<li>수학</li>
<li>영어</li>
</ul>
<button onclick="removeSubject()" class="btn">과목 삭제</button>
<script>
function removeSubject() {
var subList = document.getElementById("subjectList");
if (subList.hasChildNodes()) {
subList.removeChild(subList.childNodes[0]);
}
}
</script>
</body>
</html>코드 동작 원리
- getElementById()로 id가 subjectList인 <ul> 요소를 가져옵니다.
- hasChildNodes() 메서드로 목록에 자식 노드가 남아 있는지 확인합니다. 이 검사를 생략하면 모든 항목이 삭제된 후 오류가 발생할 수 있습니다.
- childNodes[0]으로 첫 번째 자식 노드를 선택한 뒤 removeChild()로 삭제합니다.
참고: 공백이나 줄바꿈도 텍스트 노드로 인식되므로, HTML 작성 방식에 따라 childNodes[0]이 의도한 <li> 요소가 아닐 수 있습니다. 정확하게 첫 번째 <li>를 삭제하려면 subList.querySelector('li') 또는 children[0]을 사용하는 것이 더 안전합니다.
실행 결과(Output)
위 코드를 실행하면 다음과 같은 화면이 출력됩니다.
[과목 삭제] 버튼을 클릭하면 목록의 첫 번째 항목부터 차례대로 제거됩니다.
버튼을 네 번 클릭하면 목록의 모든 항목이 사라지며, hasChildNodes() 조건 덕분에 그 이후에는 오류 없이 안전하게 처리됩니다.