[Jquery] remove(), detach() - 요소 삭제하는 방법

   

 

이번에는 요소를 삭제하는 메소드에 대해 알아보겠습니다.

 

요소를 삭제하는 메소드는 여러가지가 있습니다.

하지만, 이번 글에는 remove()와 detach()만을 다루고 다음에 시간이 되면 empty() 메소드에 대하여 글을 작성해보겠습니다.

 

아래 메소드를 사용하면 선택한 요소나 콘텐츠를 삭제할 수 있습니다.

1. .remove()

2. .detach()

 

---

.remove() 메소드

선택한 요소를 DOM에서 삭제합니다.

이때 삭제되는 요소와 연관된 제이쿼리나 이벤트 모두 함께 삭제됩니다.

 

아래 예제를 통하여 잘 삭제되었는지 확인해 보도록 하겠습니다.

<script>
    $(function() {
        $("button").on("click", function() {
            $(".content").remove(".first, .second");
        });
    });
</script>

<h1>.remove() 메소드</h1>
<div>
    <div class="content first">첫 번째 컨텐츠에요!</div>
    <div class="content second">두 번째 컨텐츠에요!</div>
    <div class="content third">세 번째 컨텐츠에요!</div>
</div>
<br>
<button>div 요소 삭제</button>

 

출력 결과

 

button을 클릭하면 content 클래스의 .first와 .second가 삭제되는 예제였습니다.

세 번째 클래스만 잘 남아있는게 보이네요.

 

 

 

 

 

---

.detach() 메소드

선택한 요소를 DOM에서 삭제합니다.

이때 remove() 메소드와는 다르게 삭제되는 요소와 연관된 제이쿼리나 이벤트는 삭제되지 않고, 계속 유지됩니다.

 

아래 예제를 통하여 자세히 살펴보도록 하겠습니다.

<script>
    $(function () {
        var data;
        $("#detachBtn").on("click", function() {
            data = $(".content").detach(); // 클래스가 "content"인 데이터 모두 삭제
        });
        $("#restoreBtn").on("click", function() {
            $("#container").append(data); // detach 당시 삭제되었던 모든 요소를 다시 추가
        })
    })
</script>

<h1>.detach() 메소드</h1>
<div id="container">
    <div>첫 번째 컨텐츠에요!</div>
    <div class="content">두 번째 컨텐츠에요!</div>
    <div class="content">세 번째 컨텐츠에요!</div>
</div>
<br>
<button id="detachBtn">div 요소 삭제</button>
<button id="restoreBtn">div 요소 복구</button>

 

츌력 결과

 

id가 'detachBtn'인 button을 클릭하면 클래스 이름이 'content'인 것이 모두 삭제됩니다.

그리고, id가 'restoreBtn'인 button을 클릭하면 요소가 다시 추가됩니다.

append() 메소드로 요소가 추가되었네요.