JavaScript에서 DOM 요소의 모든 자식 노드를 한 번에 제거하는 방법

웹 개발을 하다 보면 특정 DOM 요소의 자식 요소들을 전부 지우고 내용을 초기화해야 하는 상황이 자주 발생합니다. 예를 들어 목록을 새로 그리기 전에 기존 항목을 비운다거나, 컨테이너의 내용을 완전히 리셋할 때가 대표적입니다.

while 반복문과 hasChildNodes() 활용하기

가장 널리 알려진 방법은 hasChildNodes() 메서드와 removeChild() 메서드를 while 반복문으로 조합하는 것입니다.

var list = document.getElementById("mList");
while (list.hasChildNodes()) {
    list.removeChild(list.firstChild);
}

이 코드는 id가 mList인 요소에서 자식 노드가 더 이상 없을 때까지 첫 번째 자식을 반복해서 삭제하므로, 실행이 끝나면 해당 요소의 모든 자식이 제거된 빈 상태가 됩니다.

전체 예제

실제 HTML 문서에 적용하면 아래와 같이 작성할 수 있습니다. 버튼을 클릭하면 mFunction()이 호출되어 div 안의 내용이 모두 사라집니다.

<html>
    <body>
        <div id="mList" style="width:400px;background-color:gray">
            <ul>
                <li>li- child</li>
                <li>li- child</li>
            </ul>
        </div>
        <button onclick="mFunction()">Submit</button>
        <script>
            function mFunction() {
                var list = document.getElementById("mList");
                while (list.hasChildNodes()) {
                    list.removeChild(list.firstChild);
                }
            }
        </script>
    </body>
</html>

핵심 코드 살펴보기

document.getElementById("mList") : 해당 ID를 가진 div 요소를 가져옵니다.
hasChildNodes() : 자식 노드가 하나라도 존재하면 true를 반환하고, 없으면 false를 반환합니다.
removeChild(list.firstChild) : 현재 첫 번째 자식 노드를 부모 요소에서 제거합니다.

더 간단한 대체 방법

위 방법 외에도 상황에 따라 더 간결한 방법들이 있습니다.

// 1. innerHTML 속성 사용
list.innerHTML = "";

// 2. replaceChildren() 사용 (모던 브라우저)
list.replaceChildren();

innerHTML 방식은 한 줄로 처리할 수 있어 편리하지만, 자식 노드에 연결된 이벤트 리스너가 정상적으로 해제되지 않아 메모리 누수 가능성이 있다는 점에 유의해야 합니다. 반면 replaceChildren()은 최신 웹 표준 API로, 인자 없이 호출하면 모든 자식을 안전하게 제거하므로 최신 브라우저 환경이라면 가장 권장되는 방법입니다.