• Q&A
  • 회원가입
  • 로그인

[web] JQ - detach() vs. remove() 메서드 차이 예제

857  

 

차이 예제

 

<!DOCTYPE html>

<html>

<head>

<style>

p {

  border:1px dashed red;

  padding:10px;

  margin:10px;

}

div {

  border:1px dashed blue;

  padding:10px;

  margin:10px;    

}

</style>

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

</head>

<body>

  <p class='a'>A 클릭 : remove()</p>

  <p class='b'>B 클릭 : detach()</p>

  <div></div>

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

  

  <script>

$(document).ready(function(){  

   $("p.b").click( function() {      

      alert( $(this).text());   

      var detached = $("p.b").detach(); // detach() 메서드로 제거하면

      $("div").append(detached);  // append() 메서드로 다시 추가 시, 상단 핑크색 코드 작동 O

   });

   $("p.a").click( function() {      

      alert( $(this).text()); 

      var removed = $("p.a").remove(); // remove() 메서드로 제거하면

      $("div").append(removed);  // append() 메서드로 다시 추가 시, 상단 핑크색 코드 작동 X

   });

});

</script>

</body>

</html>

  

  

결과 보기

 

 

 

detach()  vs.  remove()

 

detach() 메서드
제거된 요소와 관련된 제이쿼리 데이터 (예: 이벤트, 메서드 등) 살아 있음.
append() 메서드 이용해 다시 삽입 시, 삭제됐던 요소의 제이쿼리 정상 작동 O

remove() 메서드
제거된 요소와 관련된 제이쿼리 데이터 (예: 이벤트, 메서드 등) 함께 삭제.
append() 메서드 이용해 다시 삽입 시, 삭제됐던 요소의 제이쿼리 정상 작동 X

 



방문자 수

오늘 2,301
어제 2,258
최대 2,418
이달 40,175
전체 1,045,002
찾아주셔서 감사합니다. Since 2012