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

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

 

차이 예제

 

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

 


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

분류 제목 조회
talk 요새 이삿짐 싸느라 그누보드 공부할 시간이 없네요.
119
119
talk 저는 부트스트랩 (Bootstrap), 테일윈드(Tailwind) 안 좋아해요. 설문 중
173
173
talk 이사 전 잘 안 쓰는 물건 처분하려고 당근을 가입했어요.
175
175
site 로또번호생성기 (= 로또번호추출기 : Lotto Number Creator)
167
167
drama 미녀와 순정남 (50부작) - 미녀 여배우와 드라마 감독의 러브 스토리 (넷플릭스 추천작)
200
200
ucc 누나가 직접 알려주는 연상 꼬시는 방법 (= 누나가 흔들리는 “2가지”)
182
182
site 평수계산기 (Area Calculator) - 제곱미터 단위 너비와 평수 너비 상호 자동 변환
157
157
pc 윈도우 10 종료 시 'Task Host Window' 오류 해결 방법 (= 태스크 호스트 윈도우 에러 해결…
297
297
ucc 2024년 드론에 포착된 세계 신비롭고 아름다운 장면들
178
178
pc 윈도우 임시파일 제거해 하드공간 저장소 확보하기
200
200
1/156
목록
찾아주셔서 감사합니다. Since 2012