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

http://blog.naver.com/PostView.nhn?blogId=gmlwns77&logNo=50157391611

jQuery의 remove(), empty(), detach() 함수를 이용하여 노드를 dom에서 제거하는 방법을 알아보겠습니다.

예제에 사용될 메소드는 다음과 같습니다.

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

이미지 출처 :  바로바로 할 수 있는 jQuery 입문 저자 : 유광열

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.html

> 소스 보기

 

<p><img src="http://blogimgs.naver.net/nblog/skins/weather/weather_15_7"/></p> 노드가 완전히 제거 됩니다.

 

예제 2) empty.html

> 소스 보기

<p>item1</p>에서 item1만 삭제되고 <p></p>가 남게 됩니다.

 

예제 3) detach.html

 

> 소스 보기

 

div#content의 모든 내용은 dom에서 제거 되고 div#content2에 삽입 됩니다.

 

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

[출처] jQuery dom제거 함수 remove(), empty(), detach()|작성자 방글라