[jQuery] dom 제거 함수 remove(), empty(), detach()

jQuery의 remove(), empty(), detach() 함수를 이용하여 노드를 dom에서 제거하는 방법

1. remove() : 선택된 노드를 dom에서 제거

ex) 이미지 태그중 첫번째 노드 제거

$("img:first").remove();

2. empty() : 선택 객체의 자식노드를 삭제. 선택한 객체를 삭제하는 remove와는 다르게 자식노드를 삭제하기 떄문에 선택객체는 남아있음

ex) p태그중 첫번째 p태그의 내용을 삭제, p노드 자체가 삭제되지는 않음

$("p:first").empty();

3. detach() : remove 함수처럼 선택된 노드를 삭제하지만 detach함수에 의해 제거된 노드를 임시로 보관할 수 있어서 제거와 삽입을 반복할 떄에 많이 사용

ex) div#content의 내용을 div#content2에 넣는다.

var temp = $("div#content").detach();

$("div#content2").html(temp);

 

정리해보면, remove함수는 해당노드를 포함한 모든 노드, 관련된 모든 이벤트, 데이터 모두 제거. 이때 데이터와 이벤트를 제거하지 않으려면 detach()를 사용.

empty함수는 선택 객체는 삭제 하지 않고 자식노드를 삭제. 세 함수중 제거 속도는 remove가 가장 빠름

예제1)  remove : <p><img src="img1.jpg"/></p> 노드가 완전히 제거됨

$(function(){

//이미지 태그중 첫번째 노드 제거

$("img:first").remove();

});

<div id="content">

<img src="img1.jpg"/>

<img src="img2.jpg"/>

<img src="img3.jpg"/>

</div>

예제2) empty : <p>item1</p>에서 item1만 삭제되고 <p></p>가 남게됨

$(function(){

//p태그중 첫번째 p태그의 내용을 삭제,p노드 자체가 삭제되지는 않음

$("p:first").empty();

});

<div id="content">

<p>item1</p>

<p>item2</p>

<p>item3</p>

</div>

예제3) detach : div#content의 모든 내용은 dom에서 제거되고 div#content2에 삽입됨

$(function(){

//div#content의 내용을 div#content2에 넣는다.

var temp = $("div#content").detach();

$("div#content2").html(temp);

});

<div id="content">

<p>item1</p>

<p>item2</p>

<p>item3</p>

</div>

<div id="content2">

</div>

 

* 참고서적 : 바로바로 할 수 있는 jQuery 입문 저자 : 유광열

* 출처 : 방글라 (gmlwns77)의 jQuery dom제거 함수 remove(), empty(), detach() | JQUERY / 프로그램 | 2012. 12. 18. 11:49
           http://blog.naver.com/gmlwns77/50157391611