차이 예제
<!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() 메서드살아 있음 .정상 작동 O remove() 메서드함께 삭제. 정상 작동 X
