[jQuery] 14. remove(), empty() 사용법

지난 글에서는 jQuery의 before(), after()를 사용해서 선택한 요소의 앞뒤에 새로운 내용을 추가하는 방법을 알아봤습니다.

이번 글에서는 HTML 요소를 삭제할 때 사용하는 remove()와 empty()에 대해 알아보겠습니다.

append(), prepend(), before(), after()로 요소를 추가했다면, 이제는 필요 없는 요소를 지우는 방법도 알아야 합니다.

1. remove(), empty()란?

jQuery에서 요소를 삭제할 때는 remove()와 empty()를 사용할 수 있습니다.

remove() : 선택한 요소 자체를 삭제합니다.
empty() : 선택한 요소는 남기고, 그 안의 내용만 비웁니다.

두 메서드는 모두 삭제와 관련되어 있지만, 삭제되는 범위가 다릅니다.

$("#box").remove(); // box 자체 삭제
$("#box").empty();  // box 안의 내용만 삭제

2. remove() 기본 사용법

remove()는 선택한 요소 자체를 화면에서 삭제합니다.

📌 기본 문법

$("선택자").remove();

📌 예제 코드

<div id="box" style="padding:20px; background:#eeeeee;">
  삭제될 박스입니다.
</div>

<button id="removeBtn">박스 삭제</button>

<script>
  $("#removeBtn").click(function() {
    $("#box").remove();
  });
</script>

📌 실행 결과

처음에는 회색 박스가 화면에 표시됩니다.
박스 삭제 버튼을 클릭합니다.
id가 box인 div 요소 자체가 삭제됩니다.
박스 안의 내용도 함께 사라집니다.

3. empty() 기본 사용법

empty()는 선택한 요소 자체는 남겨두고, 그 안의 내용만 삭제합니다.

📌 기본 문법

$("선택자").empty();

📌 예제 코드

<div id="box" style="padding:20px; background:#eeeeee;">
  <p>이 문장만 삭제됩니다.</p>
</div>

<button id="emptyBtn">내용 비우기</button>

<script>
  $("#emptyBtn").click(function() {
    $("#box").empty();
  });
</script>

📌 실행 결과

처음에는 div 안에 문장이 들어 있습니다.
내용 비우기 버튼을 클릭합니다.
div 안의 p 태그와 문장이 삭제됩니다.
하지만 id가 box인 div 자체는 남아 있습니다.

4. remove()와 empty() 차이

remove()와 empty()의 가장 큰 차이는 기준 요소까지 삭제하느냐입니다.

메서드	삭제 범위	기준 요소
remove()	선택한 요소와 그 안의 내용 전체 삭제	삭제됨
empty()	선택한 요소 안의 내용만 삭제	남아 있음

📌 비교 코드

$("#box").remove(); // box까지 삭제
$("#box").empty();  // box 내부만 삭제

요소 자체가 필요 없으면 remove(), 틀은 남기고 안의 내용만 비우고 싶으면 empty()를 사용하면 됩니다.

5. 리스트 항목 삭제하기

remove()는 목록에서 특정 항목을 삭제할 때 자주 사용됩니다.

📌 예제 코드

<ul id="list">
  <li id="item1">HTML 공부하기</li>
  <li id="item2">CSS 공부하기</li>
  <li id="item3">jQuery 공부하기</li>
</ul>

<button id="deleteBtn">CSS 항목 삭제</button>

<script>
  $("#deleteBtn").click(function() {
    $("#item2").remove();
  });
</script>

📌 실행 결과

처음에는 세 개의 li 항목이 표시됩니다.
CSS 항목 삭제 버튼을 클릭합니다.
id가 item2인 li 요소가 삭제됩니다.
HTML 공부하기와 jQuery 공부하기만 남습니다.

6. 전체 목록 비우기

목록 전체 틀은 유지하고, 안의 li 항목만 모두 지우고 싶다면 empty()를 사용할 수 있습니다.

📌 예제 코드

<ul id="todoList">
  <li>HTML 공부하기</li>
  <li>CSS 공부하기</li>
  <li>jQuery 공부하기</li>
</ul>

<button id="clearBtn">목록 비우기</button>

<script>
  $("#clearBtn").click(function() {
    $("#todoList").empty();
  });
</script>

📌 실행 결과

처음에는 ul 안에 li 항목들이 들어 있습니다.
목록 비우기 버튼을 클릭합니다.
ul 안의 li 항목들이 모두 삭제됩니다.
ul 태그 자체는 남아 있습니다.

7. 클릭한 요소만 삭제하기

여러 요소 중 클릭한 요소만 삭제하고 싶다면 $(this)를 사용합니다.

📌 예제 코드

<button class="item">항목 1</button>
<button class="item">항목 2</button>
<button class="item">항목 3</button>

<script>
  $(".item").click(function() {
    $(this).remove();
  });
</script>

📌 실행 결과

항목 1 버튼을 클릭하면 항목 1만 삭제됩니다.
항목 2 버튼을 클릭하면 항목 2만 삭제됩니다.
현재 클릭한 요소를 기준으로 삭제할 때 $(this)를 사용합니다.

8. 부모 요소 삭제하기

삭제 버튼을 클릭했을 때 버튼만 삭제되는 것이 아니라, 버튼이 들어 있는 카드 전체를 삭제하고 싶을 수 있습니다.

이럴 때는 parent()나 closest()를 함께 사용할 수 있습니다.

📌 예제 코드

<div class="card" style="padding:15px; background:#eeeeee; margin-bottom:10px;">
  <p>삭제할 카드입니다.</p>
  <button class="deleteBtn">삭제</button>
</div>

<script>
  $(".deleteBtn").click(function() {
    $(this).parent(".card").remove();
  });
</script>

📌 실행 결과

삭제 버튼을 클릭합니다.
버튼만 삭제되는 것이 아니라 card div 전체가 삭제됩니다.
버튼이 속한 부모 요소를 삭제할 때 parent()를 함께 사용할 수 있습니다.

9. closest()로 가까운 부모 삭제하기

HTML 구조가 조금 더 복잡할 때는 parent()보다 closest()가 더 편할 수 있습니다.

closest()는 현재 요소에서 가장 가까운 부모 요소를 찾아줍니다.

📌 예제 코드

<div class="card" style="padding:15px; background:#eeeeee; margin-bottom:10px;">
  <div class="card-body">
    <p>삭제할 카드입니다.</p>
    <button class="deleteBtn">삭제</button>
  </div>
</div>

<script>
  $(".deleteBtn").click(function() {
    $(this).closest(".card").remove();
  });
</script>

📌 실행 결과

삭제 버튼을 클릭합니다.
버튼과 가장 가까운 .card 요소를 찾아 삭제합니다.
중간에 card-body 같은 요소가 있어도 원하는 카드 전체를 삭제할 수 있습니다.

10. 동적으로 추가한 항목 삭제하기

append()로 나중에 추가한 요소에 삭제 버튼을 넣을 수 있습니다.

하지만 동적으로 추가된 요소는 처음부터 존재하던 요소가 아니기 때문에 이벤트 연결 방식에 주의해야 합니다.

이럴 때는 on()을 사용해서 부모 요소에 이벤트를 위임하는 방식을 사용할 수 있습니다.

📌 예제 코드

<input type="text" id="itemInput" placeholder="할 일을 입력하세요">
<button id="addBtn">추가</button>

<ul id="todoList"></ul>

<script>
  $("#addBtn").click(function() {
    var item = $("#itemInput").val().trim();

    if (item === "") {
      alert("내용을 입력하세요.");
      return;
    }

    var li = $("<li></li>");
    var text = $("<span></span>").text(item);
    var button = $("<button>삭제</button>").addClass("deleteBtn");

    li.append(text).append(" ").append(button);

    $("#todoList").append(li);
    $("#itemInput").val("");
  });

  $("#todoList").on("click", ".deleteBtn", function() {
    $(this).parent("li").remove();
  });
</script>

📌 실행 결과

input에 할 일을 입력하고 추가 버튼을 클릭합니다.
목록에 할 일과 삭제 버튼이 함께 추가됩니다.
삭제 버튼을 클릭하면 해당 li 항목만 삭제됩니다.
나중에 추가된 요소도 on()을 사용하면 이벤트가 정상 동작합니다.

11. 삭제 전에 확인창 띄우기

실제로 삭제 기능을 만들 때는 바로 삭제하기보다 확인창을 띄우는 것이 좋습니다.

confirm()을 사용하면 사용자가 확인을 눌렀을 때만 삭제되도록 만들 수 있습니다.

📌 예제 코드

<div id="post" style="padding:15px; background:#eeeeee;">
  삭제할 게시글입니다.
</div>

<button id="deleteBtn">삭제</button>

<script>
  $("#deleteBtn").click(function() {
    var result = confirm("정말 삭제하시겠습니까?");

    if (result) {
      $("#post").remove();
    }
  });
</script>

📌 실행 결과

삭제 버튼을 클릭하면 확인창이 표시됩니다.
확인을 누르면 게시글이 삭제됩니다.
취소를 누르면 아무 일도 일어나지 않습니다.

12. 조건에 맞는 요소만 삭제하기

remove()는 특정 조건에 맞는 요소만 삭제할 때도 사용할 수 있습니다.

예를 들어 완료된 항목만 삭제하고 싶다면 class를 기준으로 선택하면 됩니다.

📌 예제 코드

<ul id="list">
  <li>HTML 공부하기</li>
  <li class="done">CSS 공부하기 완료</li>
  <li class="done">jQuery 공부하기 완료</li>
</ul>

<button id="deleteDoneBtn">완료 항목 삭제</button>

<script>
  $("#deleteDoneBtn").click(function() {
    $("#list .done").remove();
  });
</script>

📌 실행 결과

처음에는 일반 항목과 완료 항목이 함께 표시됩니다.
완료 항목 삭제 버튼을 클릭합니다.
class가 done인 li 항목만 삭제됩니다.
HTML 공부하기 항목은 그대로 남아 있습니다.

13. 전체 예제

이번에는 할 일 목록을 추가하고, 개별 삭제와 전체 비우기를 함께 사용하는 예제를 만들어보겠습니다.

📌 예제 코드

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery remove empty</title>
  <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

  <style>
    #todoList {
      margin-top: 15px;
      padding: 0;
      list-style: none;
    }

    #todoList li {
      padding: 10px;
      margin-bottom: 8px;
      background: #eeeeee;
      border-radius: 6px;
    }

    .deleteBtn {
      margin-left: 10px;
    }
  </style>
</head>
<body>

  <h2>jQuery remove(), empty() 공부</h2>

  <input type="text" id="todoInput" placeholder="할 일을 입력하세요">

  <button id="addBtn">추가</button>
  <button id="clearBtn">전체 비우기</button>

  <ul id="todoList"></ul>

  <script>
    $(function() {
      $("#addBtn").click(function() {
        var todo = $("#todoInput").val().trim();

        if (todo === "") {
          alert("할 일을 입력하세요.");
          return;
        }

        var li = $("<li></li>");
        var text = $("<span></span>").text(todo);
        var deleteButton = $("<button>삭제</button>").addClass("deleteBtn");

        li.append(text).append(deleteButton);

        $("#todoList").append(li);
        $("#todoInput").val("");
      });

      $("#todoList").on("click", ".deleteBtn", function() {
        var result = confirm("이 항목을 삭제하시겠습니까?");

        if (result) {
          $(this).closest("li").remove();
        }
      });

      $("#clearBtn").click(function() {
        var result = confirm("전체 목록을 비우시겠습니까?");

        if (result) {
          $("#todoList").empty();
        }
      });
    });
  </script>

</body>
</html>

📌 실행 결과

input에 할 일을 입력하고 추가 버튼을 클릭합니다.
목록에 할 일과 삭제 버튼이 추가됩니다.
각 항목의 삭제 버튼을 클릭하면 해당 항목만 삭제됩니다.
전체 비우기 버튼을 클릭하면 ul 안의 모든 li 항목이 삭제됩니다.
todoList ul 자체는 남아 있으므로 다시 항목을 추가할 수 있습니다.

14. 자주 하는 실수

📌 1. remove()와 empty()를 헷갈리는 경우

remove()는 선택한 요소 자체를 삭제하고, empty()는 선택한 요소 안쪽만 비웁니다.

// 요소 자체 삭제
$("#box").remove();

// 요소 내부만 비우기
$("#box").empty();

📌 2. 버튼만 삭제되고 카드가 남는 경우

삭제 버튼에 remove()를 바로 사용하면 버튼만 삭제됩니다.

// 버튼만 삭제됨
$(this).remove();

// 버튼이 속한 카드 전체 삭제
$(this).closest(".card").remove();

📌 3. 동적으로 추가한 삭제 버튼이 동작하지 않는 경우

나중에 append()로 추가한 요소에는 처음에 연결한 click 이벤트가 적용되지 않을 수 있습니다.

이럴 때는 부모 요소에 on()으로 이벤트를 위임하는 방식이 좋습니다.

$("#todoList").on("click", ".deleteBtn", function() {
  $(this).closest("li").remove();
});

📌 4. 전체 목록을 지우려고 ul을 remove() 하는 경우

전체 항목만 비우고 나중에 다시 항목을 추가해야 한다면 remove()보다 empty()가 더 적절합니다.

// ul 자체가 사라짐
$("#todoList").remove();

// ul은 남기고 li만 삭제됨
$("#todoList").empty();

📌 5. jQuery 연결을 빼먹는 경우

remove(), empty()도 jQuery 메서드이므로 jQuery 라이브러리를 먼저 연결해야 합니다.

<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>

15. 핵심 정리

remove()는 선택한 요소 자체를 삭제합니다.
empty()는 선택한 요소는 남기고 내부 내용만 삭제합니다.
리스트에서 특정 li를 삭제할 때 remove()를 사용할 수 있습니다.
ul 안의 모든 li만 비우고 싶다면 empty()가 적합합니다.
클릭한 요소만 삭제하려면 $(this).remove()를 사용할 수 있습니다.
버튼이 속한 카드나 li 전체를 삭제하려면 parent() 또는 closest()를 함께 사용할 수 있습니다.
동적으로 추가한 요소의 삭제 버튼은 on() 이벤트 위임 방식을 사용하면 안정적입니다.
삭제 전 확인이 필요하다면 confirm()을 함께 사용할 수 있습니다.

이번 글에서는 jQuery의 remove(), empty() 사용법에 대해 알아봤습니다.

화면에 요소를 추가하는 것만큼 삭제하는 기능도 자주 사용됩니다. 특히 댓글, 메모, 할 일 목록처럼 사용자가 직접 항목을 추가하고 삭제하는 화면에서는 remove()와 empty()를 꼭 익혀두는 것이 좋습니다.

다음 글에서는 [jQuery] 15. parent(), children(), find() 사용법에 대해 알아보겠습니다.

'Computer Science > JQuery' 카테고리의 다른 글

[jQuery] 16. siblings(), next(), prev() 사용법 (0)	2026.06.28
[jQuery] 15. parent(), children(), find() 사용법 (0)	2026.06.26
[jQuery] 13. before(), after() 사용법 (0)	2026.06.22
[jQuery] 12. append(), prepend() 사용법 (1)	2026.06.21
[jQuery] 11. slideDown(), slideUp(), slideToggle() 사용법 (0)	2026.06.20