선택한 요소를 문서에서 제거하고 저장하는 방법 - .detach()

.detach()

.detach()는 선택한 요소를 문서에서 제거합니다. 제거한다는 면에서는 .remove()와 같으나 .detach()는 제거한 요소를 저장하여 다시 사용할 수 있습니다.

 

기본형

.detach( [ selector ] )

예를 들어

var abc = $( 'h1' ).detach();

는 h1 요소를 문서에서 제거하고 변수 abc에 저장합니다.

 

예제

Cut 버튼을 클릭하면 Dolor를 잘라내고, Paste 버튼을 클릭하면 Ipsum 위에 붙여넣습니다.

<h1>Lorem</h1>
<h2 class="a">Ipsum</h2>
<h3 class="b">Dolor</h3>
<button id="cut">Cut</button> <button id="paste">Paste</button>

jQuery( document ).ready( function() {
  var Detach;
  $( '#cut' ).click( function() {
    Detach = $( '.b' ).detach();
  });
  $( '#paste' ).click( function() {
    $( '.a' ).before( Detach );
  });
});