Jawaban:
hide()menyetel displayproperti CSS untuk elemen yang cocok none.
remove() menghapus elemen yang cocok dari DOM sepenuhnya.
detach()seperti itu remove(), tetapi menyimpan data dan peristiwa yang disimpan terkait dengan elemen yang cocok.
Untuk memasukkan kembali elemen yang terlepas ke DOM, cukup masukkan jQueryset yang dikembalikan dari detach():
var span = $('span').detach();
...
span.appendTo('body');removesebagai pengganti detach, contoh masih berfungsi.
remove(), dan pasang lagi, pengikatan akan hilang dan mengklik span tidak akan melakukan apa pun. Jika Anda memanggil detach()dan memasang kembali, binding tetap ada dan click handler tetap berfungsi.
Bayangkan selembar kertas di atas meja dengan beberapa catatan yang ditulis dengan pensil.
hide -> lemparkan pakaian ke atasnyaempty -> hapus catatan dengan penghapusdetach -> ambil kertas di tangan Anda dan simpan di sana untuk rencana masa depan apa punremove -> ambil kertasnya dan buang ke tempat sampahKertas mewakili elemen, dan catatan mewakili konten (node anak) dari elemen.
Sedikit disederhanakan dan tidak sepenuhnya akurat, tetapi mudah dipahami.
hide() setel tampilan elemen yang cocok menjadi tidak ada.
detach() menghapus elemen yang cocok, termasuk semua teks dan simpul anak.
Metode ini menyimpan semua data yang terkait dengan elemen sehingga dapat digunakan untuk memulihkan data elemen serta penangan kejadian.
remove() juga menghapus elemen yang cocok, termasuk semua teks dan simpul anak.
Namun, dalam hal ini hanya data elemen yang dapat dipulihkan, bukan penangan kejadiannya.
Di jQuery, ada tiga metode untuk menghapus elemen dari DOM. Ketiga metode yang .empty(), .remove(), dan .detach(). Semua metode ini digunakan untuk menghapus elemen dari DOM, tetapi semuanya berbeda.
.menyembunyikan()
Sembunyikan elemen yang cocok. Tanpa parameter, metode .hide () adalah cara termudah untuk menyembunyikan elemen HTML:
$(".box").hide();.kosong()
Metode .empty () menghapus semua node anak dan konten dari elemen yang dipilih. Metode ini tidak menghapus elemen itu sendiri, atau atributnya.
Catatan
Metode .empty () tidak menerima argumen apa pun untuk menghindari kebocoran memori. jQuery menghapus konstruksi lain, seperti data dan event handler, dari elemen anak sebelum menghapus elemen itu sendiri.
Contoh
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").empty();
</script>Ini akan menghasilkan struktur DOM dengan teks Hai dihapus:
<div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>Jika kita memiliki sejumlah elemen bersarang di dalamnya <div class="hai">, mereka juga akan dihapus.
.menghapus()
Metode .remove () menghapus elemen yang dipilih, termasuk semua teks dan node turunan. Metode ini juga menghapus data dan peristiwa dari elemen yang dipilih.
Catatan
Gunakan .remove () bila Anda ingin menghapus elemen itu sendiri, serta semua yang ada di dalamnya. Selain itu, semua kejadian terikat dan data jQuery yang terkait dengan elemen akan dihapus.
CONTOH
Perhatikan html berikut:
<div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
$("div.hai").remove();
</script>Ini akan menghasilkan struktur DOM dengan <div>elemen yang dihapus:
<div class="content">
<div class="goodevening">good evening</div>
</divJika kita memiliki sejumlah elemen bersarang di dalamnya <div class="hai">, mereka juga akan dihapus. Konstruksi jQuery lainnya, seperti data atau event handler, juga akan dihapus.
.melepaskan()
Metode .detach () menghapus elemen yang dipilih, termasuk semua teks dan simpul anak. Namun, itu menyimpan data dan peristiwa. Metode ini juga menyimpan salinan elemen yang dihapus, yang memungkinkannya untuk dimasukkan kembali di lain waktu.
Catatan
Metode .detach () berguna ketika elemen yang dihapus akan dimasukkan kembali ke DOM di lain waktu.
Contoh
<!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>Untuk info lebih lanjut, kunjungi: 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, lihat stackoverflow.com/questions/12058896/…