본문 바로가기
프로그래밍/jQuery

jQuery API 정복 - 요소 제거, detach()

by zoo10 2011. 11. 22.

.detach()

원문 링크 http://api.jquery.com/detach/

.detach( [selector] )Returns : jQuery

개요 : DOM 에서 조건에 일치되는 요소들을 제거합니다.

  • .detach( [selector] )
  • selector 제거될 요소를 선택하는 선택자

.detach() 함수는 .remove()입니다. 대신 .detach() 함수에 의해 제거된 요소들은 모두 jQuery 데이터 형태로 유지됩니다. 즉, 이 함수는 DOM에서 제거했다가 추후에 다시 삽입하는 형태로 사용하기 아주 유용합니다.

예 제  
DOM 에서 모든 p 태그들을 떼어(detach)냅니다.

<!DOCTYPE html>
<html>
<head>
  <style>p { background:yellow; margin:6px 0; } p.off { background: black; }</style>
  <script src="http://code.jquery.com/jquery-latest.js"></script>
</head>
<body>
  <p>Hello</p> 
  how are 
  <p>you?</p>
  <button>Attach/detach paragraphs</button>
<script>
    $("p").click(function(){
      $(this).toggleClass("off");
    });
    var p;
    $("button").click(function(){
      if ( p ) {
        p.appendTo("body");
        p = null;
      } else {
        p = $("p").detach();
      }
    });</script>

</body>
</html>

미리보기

한마디로 붙였다 띠였다 할 수 있다는 거네요.

 

그럼 즐프하세요.

※ 본 예제는 http://www.jquery.com 에 있는 내용임을 밝힙니다.