차이 예제
<!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
