.empty()

jQuery Reference

.empty()는 선택한 요소의 자식 요소와 텍스트 노드를 모두 지웁니다. 선택한 컨테이너 자체와 그 속성은 남으므로, 목록이나 결과 영역을 비운 뒤 다시 채울 때 사용할 수 있습니다.

문법과 적용 범위

$("#list").empty();

화면에 보이는 글자만 지우는 것이 아니라 내부의 중첩 요소도 제거합니다. 제거되는 자손의 jQuery 데이터와 이벤트 핸들러는 정리되지만 선택한 컨테이너에 등록한 핸들러와 속성은 유지됩니다. 반환값은 그 컨테이너의 jQuery 객체입니다. DOM(Document Object Model)은 브라우저가 관리하는 문서 트리이며, Elements에서 남은 컨테이너를 확인할 수 있습니다.

jQuery 공식 문서의 .empty() 정의와 인수에서 다른 호출 형태도 확인할 수 있습니다.

전체 실행 예제

아래 코드를 UTF-8 형식의 example.html 파일로 저장한 뒤 브라우저로 여세요. 예제는 jQuery 4.0.0 일반 빌드를 외부 주소에서 불러오므로 인터넷 연결이 필요합니다. 문서가 준비된 뒤 실행하도록 $(function () { ... }) 안에 코드를 작성했습니다.

<!doctype html>
<html lang="ko">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>jQuery empty 예제</title>
  <style>
    body { margin: 24px; font-family: sans-serif; line-height: 1.6; }
    .marked { background: #fff0b3; border: 2px solid #835b00; }
    .active { color: #a00000; font-weight: bold; }
    button, input, select { font: inherit; }
    #output { white-space: pre-wrap; overflow-wrap: anywhere; }
  </style>
  <script src="https://code.jquery.com/jquery-4.0.0.min.js"></script>
</head>
<body>
<div id="container" class="marked"><p>문단 <strong>강조</strong></p>직접 텍스트</div>
<button id="empty" type="button">내용 비우기</button>
<button id="fill" type="button">다시 채우기</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#empty").on("click", function () {
        $("#container").empty();
        $("#output").text("컨테이너 수: " + $("#container").length +
          " / 자식 노드 수: " + document.getElementById("container").childNodes.length);
      });
      $("#fill").on("click", function () {
        $("#container").append($("<p>").text("새 결과"));
      });
    });
  </script>
</body>
</html>

실행 결과 확인

내용 비우기를 누르면 문단·strong·직접 텍스트가 모두 사라지고 컨테이너의 테두리는 남습니다. 결과는 컨테이너 수: 1 / 자식 노드 수: 0입니다. 다시 채우기를 누르면 같은 컨테이너 안에 새 결과 문단이 생깁니다.

사용할 때 주의할 점

input의 입력값은 자식 노드가 아니므로 .empty()로 비우지 않습니다. 입력칸에는 .val("")를 사용하세요.
부모에서 자손 대상으로 이벤트를 위임한 경우 부모가 남으므로 새 자손에도 같은 위임이 적용될 수 있습니다. 삭제한 자식에 직접 등록했던 이벤트와는 다릅니다.
다시 채우기 버튼을 여러 번 누르면 문단이 계속 추가됩니다. 결과를 교체할 목적이면 .empty().append(...)처럼 먼저 비워야 합니다.
컨테이너 자체까지 없애려면 .remove()를 사용합니다. 비운 원래 내용이 필요한 경우에는 실행 전에 내용을 보관하세요.

용도를 비교하려면 .remove()와 컨테이너 보존 여부 비교, .val()로 입력칸 비우기을 참고하세요.

jQuery Reference