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

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

4,503  

 

차이 예제

 

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

 



분류 제목
life '시치미', '어처구니', '득달' 순우리말 어원 아시나요?
ucc 에이프릴 레이첼 닮은 애니 캐릭터 1
laragon Laragon (라라곤) - GeoIP (지오아이피) 설치
sports 충격 !! 중국 축구 공한증 사라짐
dance 뽕짝 감성 엉덩이 흔들기 댄스
dance 클락 CLOCK 정인 님 - 헬로비너스 위글위글 댄스 버스킹 [누나]
sports 토트넘 손흥민 리버풀전 리그 6호골 (유럽통산 200호골) + 울브스 황희찬 맨시티전 리그 4호골 (※ 시즌…
talk 아파트 대신에 내진 설계 잘 된 주택 구입하세요.
sports 대한민국 카타르 월드컵 16강 진출 드라마
dance STAYC 스테이씨 아이사 님 - RUN2U 런투유 댄스 [누나]
ucc 회원 님, 수학 근의공식 아시나요? [유머]
talk 가입했습니다 1
web 의뢰자견적과 작업자견적 차이 (= 의뢰인과 제작자의 견적차이 = 개발자임금 = 작업임금 = 의뢰가격 = 의뢰…
web 웹틸 (WebTil) - 웹상에서 plugin 폴더밖에 넣어 사용하는 모든 편의 웹솔루션을 일컫는 용어 (…
military 한국형 경항모 (=경항공모함)에 일본/중국 대실망.
sports 포르투갈 호날두, 대한민국 월드컵 16강 진출 위해 맹활약 + 호날두 새 별명
talk 코로나 걸린 줄 알았는데, 단순 독감이라고 하네요.
talk 중국 축구가 3점차로 대한민국 이겼네요. 제 예상을 깨고...
web PHP - 3개 변수가 나란히 등호로 연결된 의미 ★★★★★
ucc 혜원진 - Left & Right (왼쪽 & 오른쪽) COVER
95/163
목록
찾아주셔서 감사합니다. Since 2012