Câu trả lời:
hide()đặt thuộc displaytính CSS của các phần tử phù hợp thành none.
remove() loại bỏ hoàn toàn các phần tử phù hợp khỏi DOM.
detach()giống như remove(), nhưng giữ dữ liệu được lưu trữ và các sự kiện được liên kết với các phần tử phù hợp.
Để chèn lại một phần tử tách rời vào DOM, chỉ cần chèn jQuerytập hợp được trả về từ detach():
var span = $('span').detach();
...
span.appendTo('body');removethay thế detach, ví dụ vẫn hoạt động.
remove()và đính kèm lại nó, ràng buộc sẽ biến mất và nhấp vào span sẽ không làm gì cả. Nếu bạn gọi detach()và gắn lại, ràng buộc vẫn giữ nguyên và trình xử lý nhấp chuột tiếp tục hoạt động.
Hãy tưởng tượng một tờ giấy trên bàn với một số ghi chú được viết bằng bút chì.
hide -> ném một chiếc áo vào nóempty -> xóa các ghi chú bằng công cụ tẩydetach -> nắm lấy tờ giấy trong tay và giữ nó ở đó cho bất cứ kế hoạch nào trong tương lairemove -> lấy giấy ném vào thùng rácGiấy thể hiện phần tử và các ghi chú thể hiện nội dung (các nút con) của phần tử.
Đơn giản hóa một chút và không hoàn toàn chính xác, nhưng dễ hiểu.
hide() đặt hiển thị của phần tử phù hợp thành không có.
detach() loại bỏ các phần tử phù hợp, bao gồm tất cả văn bản và các nút con.
Phương thức này lưu trữ tất cả dữ liệu được liên kết với phần tử và do đó có thể được sử dụng để khôi phục dữ liệu của phần tử cũng như các trình xử lý sự kiện.
remove() cũng loại bỏ các phần tử phù hợp, bao gồm tất cả văn bản và các nút con.
Tuy nhiên, trong trường hợp này, chỉ dữ liệu của phần tử có thể được khôi phục, không phải các trình xử lý sự kiện của nó không thể khôi phục được.
Trong jQuery, có ba phương pháp để xóa các phần tử khỏi DOM. Ba phương pháp này .empty(), .remove()và .detach(). Tất cả các phương pháp này được sử dụng để xóa các phần tử khỏi DOM, nhưng tất cả chúng đều khác nhau.
.ẩn giấu()
Ẩn các phần tử phù hợp. Không có tham số, phương thức .hide () là cách đơn giản nhất để ẩn một phần tử HTML:
$(".box").hide();.trống()
Phương thức .empty () loại bỏ tất cả các nút con và nội dung khỏi các phần tử đã chọn. Phương thức này không loại bỏ bản thân phần tử hoặc các thuộc tính của nó.
Ghi chú
Phương thức .empty () không chấp nhận bất kỳ đối số nào để tránh rò rỉ bộ nhớ. jQuery loại bỏ các cấu trúc khác, chẳng hạn như trình xử lý dữ liệu và sự kiện, khỏi các phần tử con trước khi xóa chính các phần tử đó.
Thí dụ
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>Điều này sẽ dẫn đến cấu trúc DOM với văn bản Hai bị xóa:
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>Nếu chúng ta có bất kỳ số phần tử lồng nhau nào bên trong <div class="hai">, chúng cũng sẽ bị xóa.
.tẩy()
Phương thức .remove () loại bỏ các phần tử đã chọn, bao gồm tất cả văn bản và các nút con. Phương pháp này cũng loại bỏ dữ liệu và sự kiện của các phần tử đã chọn.
Ghi chú
Sử dụng .remove () khi bạn muốn xóa chính phần tử đó, cũng như mọi thứ bên trong nó. Ngoài ra, tất cả các sự kiện liên kết và dữ liệu jQuery được liên kết với các phần tử đều bị xóa.
THÍ DỤ
Hãy xem xét html sau:
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").remove();
</script>Điều này sẽ dẫn đến cấu trúc DOM với <div>phần tử bị xóa:
<div class="content">
<div class="goodevening">good evening</div>
</divNếu chúng ta có bất kỳ số phần tử lồng nhau nào bên trong <div class="hai">, chúng cũng sẽ bị xóa. Các cấu trúc jQuery khác, chẳng hạn như trình xử lý dữ liệu hoặc sự kiện, cũng bị xóa.
.detach ()
Phương thức .detach () loại bỏ các phần tử đã chọn, bao gồm tất cả văn bản và các nút con. Tuy nhiên, nó giữ dữ liệu và các sự kiện. Phương pháp này cũng giữ một bản sao của các phần tử đã bị loại bỏ, điều này cho phép đưa chúng vào lại sau.
Ghi chú
Phương thức .detach () hữu ích khi các phần tử bị loại bỏ sẽ được đưa lại vào DOM sau này.
Thí dụ
<!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>Để biết thêm thông tin, hãy truy cập: 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, hãy xem stackoverflow.com/questions/12058896/…