• 회원가입
  • 로그인
  • 구글아이디로 로그인

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

3,543  

 

차이 예제

 

<!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

 



분류 제목 조회
girl 이주은 치어리더 님 - 내 날개 어딨나 뚤레뚤레... 새글
7
7
ucc 여동생의 변신 - 도도하고 차가운 느낌 말 걸기 어려운 이송경 님 [유머] 새글
14
14
dance 2차원 금발 소녀 엘리베이터 댄스
31
31
dance 레드벨벳 웬디 칠 킬 댄스 (Red Velvet WENDY - Chill Kill)
34
34
ucc 층간 소음으로 입주민들 다 내쫒는 얌체 4층 입주민 고양이 [동물/유머]
31
31
sports 축구 U23 대한민국, 승부차기 끝에 호주 제압하고 WAFF (서아시아 잼피언십) 우승
21
21
sports 축구 월드컵 2차 예선 태국 원정 0:3으로 이기긴 했지만...
31
31
talk 개발자 님들, $_POST 귀신 만나본 적 있으신가요?
42
42
vote AI가 출현과 홈페이지 광고 수익 관계 설문조사 설문 중
48
48
sports 김은선 프로 님이 알려주는 올바른 골프 스윙 자세
37
37
ucc 코딩 날로 먹으려는 학생 참교육하는 ChatGPT G선생님
74
74
1/149
목록
찾아주셔서 감사합니다. Since 2012