[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() 메서드로 나중에 다시 삽입 시, 요소 테두리만 추가.