JavaScript에서 DOM 노드의 모든 자식 요소 제거하기

JavaScript에서 특정 DOM 노드 내부의 모든 자식 요소를 한 번에 제거해야 할 때가 있습니다. 가장 간단하고 널리 사용되는 방법은 해당 요소의 innerHTML 속성을 빈 문자열('')로 설정하는 것입니다.

핵심 개념

element.innerHTML = '' 구문은 해당 요소 내부의 모든 HTML 콘텐츠(자식 노드, 텍스트 노드 등)를 즉시 비웁니다. 이는 루프를 돌며 removeChild()를 반복 호출하는 것보다 코드가 간결하고 가독성이 좋으며, 최신 브라우저에서 성능상으로도 충분히 빠릅니다.

실행 예제

아래 예제는 빨간색 박스 안에 있는 <span>과 <div> 자식 요소들을 버튼 클릭 한 번으로 모두 제거합니다.

<!DOCTYPE html>
<html lang="ko">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>자식 요소 제거 예제</title>
  <style>
    #container {
      height: 200px;
      width: 300px;
      border: 2px solid #dc3545;
      padding: 10px;
      margin-bottom: 10px;
      background-color: #fff8f8;
    }
    button {
      padding: 8px 16px;
      background-color: #007bff;
      color: white;
      border: none;
      border-radius: 4px;
      cursor: pointer;
    }
    button:hover { background-color: #0056b3; }
  </style>
</head>
<body>
  <div id="container">
    <span>JavaScript</span>
    <div>MySQL</div>
    <p>이 모든 요소가 제거됩니다.</p>
  </div>
  <button id="btnRemove">자식 요소 모두 제거</button>

  <script>
    document.getElementById('btnRemove').addEventListener('click', () => {
      const container = document.getElementById('container');
      container.innerHTML = ''; // 모든 자식 요소 제거
    });
  </script>
</body>
</html>

실행 결과

클릭 전: 빨간색 테두리 박스 안에 'JavaScript', 'MySQL', '이 모든 요소가 제거됩니다.' 텍스트가 보입니다.

버튼 클릭 후: 박스 안의 모든 내용이 깨끗하게 지워지고 빈 상자만 남습니다.

참고 사항 및 대안

이벤트 리스너 정리: 제거되는 자식 요소들에 이벤트 리스너가 등록되어 있었다면, innerHTML = '' 사용 시 메모리 누수 가능성이 있습니다. 중요한 경우 removeEventListener를 먼저 호출하거나 element.replaceChildren()(모던 브라우저 지원)를 고려하세요.
textContent 사용: HTML 파싱 없이 텍스트만 지우고 싶다면 element.textContent = ''가 더 빠르고 안전합니다(XSS 방지).
모던 API: 최신 브라우저에서는 element.replaceChildren() (인자 없이 호출)를 사용하면 더 명시적이고 표준적인 방법으로 자식 노드를 모두 제거할 수 있습니다.