JavaScript에서는 리스트의 자식 노드(child node)를 제거하기 위해 removeChild() 메서드를 제공합니다. 이 메서드를 사용하면 인덱스 위치를 기준으로 목록의 어떤 항목이든 손쉽게 삭제할 수 있습니다. 아래에서 자세히 살펴보겠습니다.
문법(Syntax)
node.removeChild(node);
removeChild() 메서드는 부모 노드에서 지정한 자식 노드를 제거하며, 제거된 노드를 반환합니다.
예제 1
다음 예제에서는 목록에 3개의 요소가 있지만, 자식 노드 하나를 제거한 후에는 두 개의 요소만 남아 출력 결과로 표시됩니다.
<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<script>
var list = document.getElementById("list");
list.removeChild(list.childNodes[1]);
</script>
</body>
</html>출력 결과
Tesla Solarcity
예제 2
다음 예제에서도 마찬가지로 목록에 3개의 요소가 있지만, removeChild() 메서드를 사용해 첫 번째 자식을 제거하면 나머지 두 개의 요소만 남아 출력 결과와 같이 표시됩니다.
<html>
<body>
<ul id = "list"><li>Tesla</li><li>Spacex</li><li>Solarcity</li></ul>
<script>
var list = document.getElementById("list");
list.removeChild(list.childNodes[0]);
</script>
</body>
</html>출력 결과
Spacex Solarcity
참고 사항
childNodes는 요소 노드뿐만 아니라 공백이나 줄바꿈으로 인한 텍스트 노드까지 포함한다는 점에 유의해야 합니다. 따라서 HTML 코드 내 줄바꿈이나 들여쓰기가 있다면 인덱스 위치가 달라질 수 있습니다. 요소 노드만 다루고 싶다면 children 속성을 사용하는 것이 더 안전합니다.