detach() 메서드

detach() 메서드는 jQuery에서 사용되는 메서드로 선택한 요소를 DOM에서 제거하지만 데이터와 이벤트 핸틀러를 유지한 채로 요소를 반환한다.

 

예시를 보자

<div class="example">
    <p>이 요소는 제거될 것입니다.</p>
</div>

다음 코드는 example 클래스를 가진 div 요소를 선택하고 detach()를 사용해서 해당 요소를 dom에서 제거한다.

$(document).ready(function() {
    var detachedElement = $('.example').detach();
    // 요소가 DOM에서 제거되었지만, 변수 detachedElement에는 요소의 복사본이 남아 있다.
});

이렇게 하면 '.example'클래스를 가진 div 요소가 DOM에서 제거되지만 'detachedElement'변수에는 그 요소의 복사본이 남아있기 때문에 필요한 경우 나중에 dom에 추가할 수 있다.

 

따라서 detach()메서드를 사용하면 요소를 제거하면서 데이터와 이벤트 핸들러를 유지할 수 있어 나중에 같은 요소를 다시 DOM에 추가해야 할때 유용하게 사용할 수 있다.