답변:
hide()일치하는 요소의 CSS display속성을 none.
remove() DOM에서 일치하는 요소를 완전히 제거합니다.
detach()와 비슷 remove()하지만 일치하는 요소와 관련된 저장된 데이터 및 이벤트를 유지합니다.
분리 된 요소를 DOM에 다시 삽입하려면 jQuery다음에서 반환 된 집합을 삽입하면 됩니다 detach().
var span = $('span').detach();
...
span.appendTo('body');remove대신 사용 detach하면 예제가 계속 작동합니다.
remove()다음 다시 연결하면 바인딩이 사라지고 스팬을 클릭해도 아무 작업도 수행되지 않습니다. 호출 detach()하고 다시 연결하면 바인딩이 유지되고 클릭 핸들러가 계속 작동합니다.
jQuery에는 DOM에서 요소를 제거하는 세 가지 방법이 있습니다. 이 세 가지 방법이 있습니다 .empty(), .remove()하고 .detach(). 이 모든 메소드는 DOM에서 요소를 제거하는 데 사용되지만 모두 다릅니다.
.숨는 장소()
일치하는 요소를 숨 깁니다. 매개 변수가없는 .hide () 메서드는 HTML 요소를 숨기는 가장 간단한 방법입니다.
$(".box").hide();.빈()
.empty () 메서드는 선택한 요소에서 모든 자식 노드와 내용을 제거합니다. 이 메소드는 요소 자체 또는 해당 속성을 제거하지 않습니다.
노트
.empty () 메서드는 메모리 누수를 방지하기 위해 인수를 허용하지 않습니다. jQuery는 요소 자체를 제거하기 전에 하위 요소에서 데이터 및 이벤트 핸들러와 같은 다른 구성을 제거합니다.
예
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>그러면 Hai 텍스트가 삭제 된 DOM 구조가 생성됩니다.
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>내부에 중첩 된 요소가 여러 개 있으면 해당 요소 <div class="hai">도 제거됩니다.
.없애다()
.remove () 메서드는 모든 텍스트 및 자식 노드를 포함하여 선택한 요소를 제거합니다. 이 메서드는 선택한 요소의 데이터와 이벤트도 제거합니다.
노트
요소 자체와 그 안의 모든 요소를 제거하려면 .remove ()를 사용하십시오. 이 외에도 요소와 관련된 모든 바인딩 된 이벤트 및 jQuery 데이터가 제거됩니다.
예
다음 html을 고려하십시오.
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").remove();
</script>그러면 <div>요소가 삭제 된 DOM 구조가 생성 됩니다.
<div class="content">
<div class="goodevening">good evening</div>
</div내부에 중첩 된 요소가 여러 개 있으면 해당 요소 <div class="hai">도 제거됩니다. 데이터 또는 이벤트 핸들러와 같은 다른 jQuery 구조도 지워집니다.
.떼다()
.detach () 메서드는 모든 텍스트 및 자식 노드를 포함하여 선택한 요소를 제거합니다. 그러나 데이터와 이벤트를 유지합니다. 이 메서드는 또한 제거 된 요소의 복사본을 유지하므로 나중에 다시 삽입 할 수 있습니다.
노트
.detach () 메서드는 제거 된 요소가 나중에 DOM에 다시 삽입 될 때 유용합니다.
예
<!doctype html>
<html>
<head>
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<p>Hai!</p>Good <p>Afternoo</p>
<button>Attach/detach paragraphs</button>
<script>
$( "p" ).click(function() {
$( this ).toggleClass( "off" );
});
var p;
$( "button" ).click(function() {
if ( p ) {
p.appendTo( "body" );
p = null;
} else {
p = $( "p" ).detach();
}
});
</script>
</body>
</html>자세한 내용은 http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html을 참조 하십시오.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.2/jquery.min.js"></script>
</head>
<body>
<script>
$(document).ready(function(){
var $span;
$span = $("<span>");
$span.text("Ngoc Xuan");
function addEvent() {
$span.on("click",function(){
alert("I'm Span");
});
}
function addSpan() {
$span.appendTo("body");
}
function addButton(name) {
var $btn = $("<input>");
$btn.attr({value:name,
type:'submit'});
if(name=="remove"){
$btn.on("click",function(){
$("body").find("span").remove();
})
}else if(name=="detach"){
$btn.on("click",function(){
$("body").find("span").detach();
})
}else if(name=="Add") {
$btn.on("click",function(){
addSpan();
})
}else if(name=="Event"){
$btn.on("click",function(){
addEvent();
})
}else if (name == "Hide") {
$btn.on("click",function(){
if($span.text()!= '')
$span.hide();
})
}else {
$btn.on("click",function(){
$span.show();
})
}
$btn.appendTo("body");
}
(function () {
addButton("remove");
addButton("detach");
addButton("Add");
addButton("Event");
addButton("Hide");
addButton("Show");
})();
});
</script>
</body>
</html>
detach, 한 번 봐 걸릴 stackoverflow.com/questions/12058896/...