[JQuery] 요소 삭제하기 (remove, detach, empty, unwrap)

remove

remove 메소드는 선택한 HTML 요소를 DOM 트리에서 삭제합니다.

이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트도 모두 함께 삭제됩니다

<p id="a">HI</p> 
<p id="b">Hello</p> 
<p id="c">Nice Meet U</p>

$("p").remove(); // 결과: p태그를 DOM에서 모두 지워버립니다.

$("p").remove('#a, #b'); // 결과: p태그 중 id가 a, b 인 요소를 찾아 제거합니다

detach

detach 메소드는 선택한 요소를 DOM 트리에서 삭제합니다.

이때 삭제되는 요소와 연관된 jQuery 데이터나 이벤트는 삭제되지 않고, 계속 유지됩니다

$("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() 메소드로 삭제되었던 모든 요소를 다시 추가함.
});

<p class="hello">HI.</p>
<p>ITSkeleton</p>
<p class="hello">Hello</p>
<button id="btnDetach">삭제</button>
<button id="btnRestore">복구</button>

삭제후 복구한다는 말이 잘 안와닿으실텐데요. 위의 코드는 p태그를 클릭하면 p태그에 wrap클래스를 추가합니다

<p class="wrap"> 이렇게 된다는것이죠 클릭한 p태그에 추가됩니다

 

추가한후 삭제를 해보면 삭제되어버리는데요 원래는 data안에 저장된 값도 함께 삭제가 되어야하지만 복구를 클릭하면 짜잔! 계속해서 유지되고 있다는것을 알 수 있습니다.

empty

empty 메소드는 선택한 요소의 자식 요소를 모두 삭제합니다.

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

<div id="container" class="wrap"> 
  <div>HI</div> 
  <div>Hello</div> 
  <div>Nice Meet U</div> 
</div>

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

id가 container 안에 있는 요소들을 모두 삭제합니다. container는 삭제되지 않습니다

unwrap

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

<div id="container" class="wrap"> 
  <div class="hello">HI</div> 
  <div>Hello</div> 
  <div>Nice Meet U</div> 
</div>

$(".hello").unwrap();

부모인 #container만 지워지며 지워지고나면

<div class="hello">HI</div> 
<div>Hello</div> 
<div>Nice Meet U</div> 

이렇게 남게 됩니다.