[JQuery] remove(), detach(), empty() 메서드 차이점

 

1. remove()

선택한 요소와 해당 요소의 자식 요소를 DOM에서 제거한다. 
요소와 그에 연결된 이벤트 핸들러도 함께 삭제된다. 

$("#id").remove();

완전히 제거되므로 메모리에서 해당 요소를 복구할 수 없다.
 
 
 

2. detach()

선택한 요소와 자식 요소를 DOM에서 제거하지만 메모리 상에서 데이터와 이벤트는 유지된다. 
나중에 같은 요소를 다시 DOM에 추가해야 할 경우 유용하다.

let element = $("#id").detach();

$("body").append(element);

이벤트 핸들러나 데이터를 보존해야 하는 경우 사용하면 좋다.
 
 
 

3. empty()

선택한 요소의 자식 요소만 제거한다. 선택한 요소 자체는 유지된다.
요소 안의 내용만 삭제하고 선택한 요소의 이벤트 핸들러나 데이터는 유지된다. 자식 요소의 이벤트는 제거된다.

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

특정 요소를 유지한 채로 내부를 비울 때 사용한다.