.remove()

jQuery Reference

.remove()는 선택한 요소를 자손과 함께 문서에서 제거합니다. 제거된 요소와 자손에 연결된 jQuery 이벤트 핸들러와 데이터도 정리하므로, 잠시 뗐다가 그대로 다시 쓸 때는 .detach()를 검토합니다.

문법과 적용 범위

$(".item").remove();
$(".item").remove(".obsolete");

선택자를 인수로 전달하면 현재 집합에서 그 조건에 맞는 요소만 제거합니다. 문서 전체를 다시 검색하는 인수가 아닙니다. 반환값은 선택했던 jQuery 객체이지만, DOM에서 빠졌으며 jQuery 데이터가 정리된 상태라는 점은 변하지 않습니다. 컨테이너를 남기고 내부만 지우려면 .empty()를 사용합니다.

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

전체 실행 예제

아래 코드를 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 remove 예제</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">
  <p class="item obsolete">삭제할 항목</p>
  <p class="item">남길 항목</p>
</div>
<button id="remove" type="button">지난 항목 삭제</button>
  <p id="output" aria-live="polite"></p>
  <script>
    $(function () {
      $("#remove").on("click", function () {
        $(".item").remove(".obsolete");
        $("#output").text("남은 항목: " + $("#container .item").length);
      });
    });
  </script>
</body>
</html>

실행 결과 확인

버튼을 누르면 삭제할 항목만 사라지고 남길 항목과 container는 유지됩니다. 결과는 남은 항목: 1입니다. 같은 버튼을 다시 눌러도 조건에 맞는 항목이 없어서 더 지워지지 않습니다.

사용할 때 주의할 점

.remove(".obsolete")는 선택한 요소들 중 obsolete인 요소를 제거합니다. 선택한 부모 내부의 obsolete 자손만 지우려면 .find(".obsolete").remove()로 범위를 정하세요.
단순히 화면에서 숨겨야 한다면 삭제 대신 .hide()나 클래스를 사용하세요. 삭제된 요소를 CSS로 다시 보이게 할 수는 없습니다.
복원이 필요하면 삭제 전 위치·내용을 저장하거나 문서를 새로 렌더링해야 합니다. 이벤트·데이터를 보존하며 재삽입할 목적에는 .detach()가 적합합니다.

용도를 비교하려면 .empty()와 제거 범위 비교을 참고하세요.

jQuery Reference