Les différences entre detach(), hide() et remove() - jQuery

Quelle est la différence fonctionnelle entre ces trois jQuery méthodes:

  • detach()
  • hide()
  • remove()
InformationsquelleAutor Vivek | 2011-02-09
  1. 148

    hide() définit les éléments qui correspondent' CSS display propriété none.

    remove() supprime la correspondance des éléments du DOM complètement.

    detach() est comme remove(), mais conserve les données stockées et les événements associés avec les éléments qui correspondent.

    À ré-insérer un décollement de l'élément dans le DOM, il suffit d'insérer le retour de l' jQuery ensemble de detach():

    var span = $('span').detach();

...

span.appendTo('body');
    • Combiné avec .clone(vrai), vous pouvez utiliser détacher pour pas cher de template qui évite jquery événements en direct: jsfiddle.net/b9chris/PNd2t
    • Je n'ai toujours pas voir la différence. Si j'utilise remove en place de detach, l'exemple fonctionne toujours.
    • Si vous avez lié un événement comme un gestionnaire de clic sur la durée de l'appel remove(), et l'attacher de nouveau, la liaison sera parti et en cliquant sur le span est de ne rien faire. Si vous appelez detach() et remettre en place, la liaison et les séjours cliquez sur gestionnaire continue de travailler.
    • la réponse est un peu plus correct concernant les supprimer (), car il n'est pas supprimé de la DOM. Ceci a des répercussions puisque les éléments complexes liées événements ont tendance à manger beaucoup de navigateur de la mémoire si elles ne sont pas ramassées par le garbage collector assez rapide. Une astuce pour libérer de la mémoire plus rapide est de $(element).html(").remove();
    • hide() définit les éléments qui correspondent' propriété CSS display à none. Cela signifie : Pouvez-vous me décrire la différence entre hide() et display:none.
    • Est remove() de la fonction supprime les événements associés ainsi? par exemple. cliquez sur,événement de changement de

    InformationsquelleAutor Jacob Relkin
  2. 41

    Imaginez un morceau de papier sur une table avec des notes écrites au crayon.

    • hide -> jeter un vêtement sur elle
    • empty -> supprimer les notes avec une gomme
    • detach -> prendre le papier dans votre main et l'y maintenir pendant quel que soit l'avenir des plans
    • remove -> attraper le papier et de le jeter à la poubelle

    Le papier représente l'élément, et les notes de représenter le contenu (les nœuds enfants) de l'élément.

    Un peu simplifié et pas tout à fait exactes, mais facile à comprendre.

    InformationsquelleAutor Zoltán Tamási
  3. 12

    hide() définit le contenu de l'élément d'affichage à aucun.

    detach() supprime les éléments qui correspondent, y compris tous les textes et les nœuds enfants.

    Cette méthode stocke toutes les données associées à l'élément et peuvent donc être utilisés pour la restauration de l'élément de données ainsi que les gestionnaires d'événements.

    remove() supprime également les éléments qui correspondent, y compris tous les textes et les nœuds enfants.

    Toutefois, dans ce cas, seul l'élément de données peuvent être restaurées, pas ses gestionnaires d'événements ne peut pas.

    InformationsquelleAutor Kumar
  4. 11

    En jQuery, il y a trois méthodes pour supprimer des éléments du DOM. Ces trois méthodes sont .empty(), .remove(), et .detach(). Toutes ces méthodes sont utilisées pour supprimer des éléments du DOM, mais ils sont tous différents.

    .hide()

    Masquer les éléments qui correspondent. Sans paramètres, la .hide() est la méthode la plus simple façon de cacher un élément HTML:

    $(".box").hide();

    .empty()

    L' .empty() méthode permet de supprimer tous les nœuds enfants et le contenu de l'élément sélectionné. Cette méthode ne supprime pas l'élément lui-même, ou de ses attributs.

    Note

    L' .empty() méthode ne permet pas d'accepter n'importe quel argument pour éviter les fuites de mémoire. jQuery supprime les autres constructions, telles que les données et les gestionnaires d'événements, à partir des éléments enfants avant d'enlever les éléments eux-mêmes.

    Exemple 

    <div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").empty();
</script>

    Cela se traduira dans un DOM structure avec le Hai texte supprimé:

    <div class="content">
<div class="hai"></div>
<div class="goodevening">good evening</div>
</div>

    Si nous avions un certain nombre d'éléments imbriqués à l'intérieur de <div class="hai">, ils serait retiré trop.

    .remove()

    L' .méthode remove() supprime les éléments sélectionnés, y compris tous les textes et les nœuds enfants. Cette méthode supprime également les données et les événements de l'élément sélectionné.

    Note

    Utilisation .remove() lorsque vous souhaitez supprimer l'élément lui-même, ainsi que tout l'intérieur. En plus de cela, tous liés les événements et jQuery données associées avec les éléments sont supprimés.

    EXEMPLE

    Considérer le code html suivant:

    <div class="content">
<div class="hai">Hai</div>
<div class="goodevening">good evening</div>
</div>
<script>
    $("div.hai").remove();
</script>

    Cela se traduira dans un DOM structure avec la <div> élément supprimé:

    <div class="content">
<div class="goodevening">good evening</div>
</div

    Si nous avions un certain nombre d'éléments imbriqués à l'intérieur de <div class="hai">, ils serait retiré trop. D'autres jQuery constructions, telles que les données ou les gestionnaires d'événements sont effacées.

    .detach()

    L' .detach() méthode supprime les éléments sélectionnés, y compris tous les textes et les nœuds enfants. Toutefois, il conserve les données et les événements. Cette méthode conserve également une copie des éléments supprimés, ce qui leur permet de remettre à une date ultérieure.

    Note

    L' .detach() la méthode est utile lorsque les éléments supprimés sont à être réinséré dans le DOM à une date ultérieure.

    Exemple

    <!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>

    Pour plus d'info, visitez: http://www.scriptcafe.in/2014/03/what-is-difference-between-jquery_15.html

    InformationsquelleAutor Jason
  5. 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>
    InformationsquelleAutor Xuân Nguyễn