<style>
p {
border:1px dashed magenta;
padding:10px;
}
div {
margin-top:30px;
border:1px dashed blue;
padding:10px;
}
button {
display:block;
width:500px;
margin:10px 0;
padding: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("button.detach").click(function(){
$("span").text("");
$("p").click( function() { alert( $(this).text()) } );
// append()로 다시 삽입 시 정상 작동 O
var hzd = $("p").detach();
$("div").append(hzd);
});
$("button.remove").click(function(){
$("span").text("");
$("p").click( function() { alert( $(this).text()) } );
// append()로 다시 삽입 시, 정상 작동 X
var hzr = $("p").remove();
$("div").append(hzr);
});
$("button.empty").click(function(){
$("span").text("");
$("p").click( function() { alert( $(this).text()) } );
// append()로 다시 삽입 시, 정상 작동 X
var hze = $("p").empty();
$("div").append(hze);
});
});
</script>
<p>홈짱닷컴 <span>Homzzang.com</span></p>
<p>홈페이지 <span>제작관리 강의</span></p>
<button class='detach'>detach</button>
<button class='remove'>remove</button>
<button class='empty'>empty</button>
<button onClick="history.go(0)">새로고침</button>
<div></div>
결과 보기
detach() 메서드
1. 선택 요소와 그 자손 요소까지 모두 제거.
2. 제거된 요소가 jQuery 데이터 형태로 유지.
3. 제거된 요소의 데이터, 이벤트도 제거되지 않고 유지.
4. attach() 메서드로 나중에 다시 삽입 시, 원본 그대로 삽입
remove() 메서드
1. 선택 요소와 그 자손 요소까지 모두 제거.
2. 제거된 요소가 jQuery 데이터 형태로 유지.
3. 제거된 요소 및 하위 요소들의 데이터, 이벤트는 전부 제거
4. attach() 메서드로 나중에 다시 삽입 시, 불완전하게 삽입
empty() 메서드
1. 선택요소는 나둔 채, 그 안의 내용만 삭제
2. attach() 메서드로 나중에 다시 삽입 시, 요소 테두리만 추가.
