• 회원가입
  • 로그인

[HTML_CSS] JQ - detach() 메서드 - 선택요소제거. (※ 데이터 및 이벤트는 유지됨).


 

<style>

  p {

    border:1px dashed magenta; 

    padding:10px;

  }

  div {

    margin-top:30px;

    border:1px dashed blue; 

    padding:10px;

  }

  button {

    display:block; 

    width:500px;

    margin:10px 0;

    padding: 10px;

  }

</style>

 

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<script>

$(document).ready(function(){

  $("button.detach").click(function(){

    $("span").text("");

    $("p").click( function() { alert( $(this).text()) } ); 

    // append()로 다시 삽입 시 정상 작동 O

    var hzd = $("p").detach();

    $("div").append(hzd);    

  });

 

  $("button.remove").click(function(){

    $("span").text("");

    $("p").click( function() { alert( $(this).text()) } ); 

    // append()로 다시 삽입 시, 정상 작동 X

    var hzr = $("p").remove();

    $("div").append(hzr);    

  });

 

  $("button.empty").click(function(){

    $("span").text("");

    $("p").click( function() { alert( $(this).text()) } );

    // append()로 다시 삽입 시, 정상 작동 X

    var hze = $("p").empty();

    $("div").append(hze);    

  });

});

</script>


<p>홈짱닷컴 <span>Homzzang.com</span></p>

<p>홈페이지 <span>제작관리 강의</span></p>

<button class='detach'>detach</button>

<button class='remove'>remove</button>

<button class='empty'>empty</button>

<button onClick="history.go(0)">새로고침</button>

<div></div>


결과 보기

 

 

detach() 메서드


1. 선택 요소와 그 자손 요소까지 모두 제거.
2. 제거된 요소가 jQuery 데이터 형태로 유지.

3. 제거된 요소의 데이터, 이벤트도 제거되지 않고 유지.
4. attach() 메서드로 나중에 다시 삽입 시, 원본 그대로 삽입



remove() 메서드

 

1. 선택 요소와 그 자손 요소까지 모두 제거.
2. 제거된 요소가 jQuery 데이터 형태로 유지.

3. 제거된 요소 및 하위 요소들의 데이터, 이벤트는 전부 제거
4. attach() 메서드로 나중에 다시 삽입 시, 불완전하게 삽입



empty() 메서드 

 

1. 선택요소는 나둔 채, 그 안의 내용만 삭제
2. attach() 메서드로 나중에 다시 삽입 시, 요소 테두리만 추가.

 


방문 감사합니다. (즐겨찾기 등록: Ctrl + D)

찾아주셔서 감사합니다. Since 2012