jQuery 입문 | 요소의 조작 | 요소의 삭제 .remove() .detach() .empty() .unwrap()

요소의 삭제

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

.remove() 메소드

.remove() 메소드는 선택한 HTML 요소를 DOM 트리에서 삭제한다. 이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트도 모두 함께 삭제된다.

아래와 같이 HTML 요소가 있을 때,

<p id="one">안녕하세요.</p>
<p id="two">devkuma입니다.</p>
<p id="three">반갑습니다.</p>

`

요소 중에 id가 one, two인 요소를 삭제한다.

$("p").remove("#one, #two");

코드 실행

.detach() 메소드

.detach() 메소드는 선택한 요소를 DOM 트리에서 삭제한다. 이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트는 삭제되지 않고, 계속 유지된다.

.detach() 메소드가 반환하는 jQuery 객체를 .append()나 .prepend()와 같은 메소드에 인수로 전달하면 삭제한 요소를 다시 복구할 수도 있다.

아래와 같이 HTML 요소가 있을 때,

<p class="hello">안녕하세요.</p>
<p>devkuma입니다.</p>
<p class="hello">반갑습니다.</p>

class가 hello인 HTML 요소를 삭제했다가 다시 복구를 하여도 click 이벤트가 사라지 않는 걸 확인할 수 있다.

$("p").on("click", function() {
     $(this).toggleClass("wrap");
});
var data = null;
$("#btnDetach").on("click", function() {
    data = $(".hello").detach(); // class가 "hello"인 요소를 모두 삭제한다.
});
$("#btnRestore").on("click", function() {
    $("p").after(data);  // detach() 메소드로 삭제되었던 모든 요소를 다시 추가한다.
});

코드 실행

.empty() 메소드

.empty() 메소드는 선택한 요소의 자식 요소를 모두 삭제한다. 이때 .remove()나 .detach() 메소드와는 달리 선택된 요소 그 자체는 삭제되지 않는다.

아래와 같이 HTML 요소가 있을 때,

<div id="container" class="wrap">
    <div>안녕하세요</div>
    <div>devkuma입니다.</div>
    <div>반갑습니다.</div>
</div>

class가 container인 자식 HTML 요소 모두 삭제한다.

$("#container").empty(); // id가 "hello"인 요소의 자식 요소를 모두 삭제함.

코드 실행

.unwrap() 메소드

.unwrap() 메소드는 선택한 요소의 부모 요소를 삭제한다.

아래와 같이 HTML 요소가 있을 때,

<div id="container" class="wrap">
    <p>안녕하세요</p>
    <p>devkuma입니다.</p>
    <p>반갑습니다.</p>
</div>

$("p").unwrap(); // <p> 요소의 부모 요소를 삭제한다.

코드 실행