Perbedaan antara detach (), hide () dan remove () - jQuery

Jawaban:

151

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');
Jacob Relkin
sumber
7
Dikombinasikan dengan .clone (true), Anda dapat menggunakan detach untuk pembuatan
Chris Moschini
Saya masih tidak melihat perbedaannya. Jika saya menggunakan removesebagai pengganti detach, contoh masih berfungsi.
comecme
12
@comecme: Jika Anda telah mengikat peristiwa seperti handler klik ke span, panggil 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.
lambshaanxy
Jawaban @ Kumar sedikit lebih benar tentang remove () karena tidak dihapus dari DOM. Hal ini berdampak karena elemen kompleks dengan kejadian terikat cenderung memakan banyak memori browser jika tidak dikunyah oleh pengumpul sampah dengan cukup cepat. Trik untuk mengosongkan memori lebih cepat adalah $ (element) .html (''). Remove ();
oskarth
hide () menyetel properti tampilan CSS untuk elemen yang cocok menjadi tidak ada. Artinya: Dapatkah Anda menjelaskan kepada saya perbedaan antara hide () dan display: none.
Krish
50

Bayangkan selembar kertas di atas meja dengan beberapa catatan yang ditulis dengan pensil.

  • hide -> lemparkan pakaian ke atasnya
  • empty -> hapus catatan dengan penghapus
  • detach -> ambil kertas di tangan Anda dan simpan di sana untuk rencana masa depan apa pun
  • remove -> ambil kertasnya dan buang ke tempat sampah

Kertas mewakili elemen, dan catatan mewakili konten (node ​​anak) dari elemen.

Sedikit disederhanakan dan tidak sepenuhnya akurat, tetapi mudah dipahami.

Zoltán Tamási
sumber
14

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.

Kumar
sumber
11

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>
</div

Jika 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

Jason
sumber
0 
<!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>
Xuân Nguyễn
sumber