Définit le contenu mis à part le contenu de la page
jQuery la méthode detach() sert a supprimer les éléments sélectionnés y compris tous les nœuds de texte et les enfants
La méthode .detach() supprime les éléments sélectionnés, y compris tous les nœuds de texte et les enfants.
La méthode .detach() conserve une copie des éléments supprimés, ce qui leur permet d'être réinséré ultérieurement.
La méthode .detach() conserve également des données des gestionnaires d'événements de jQuery de l'élément.
Syntaxe :
$(sélecteur).detach()
Comment utiliser la méthode detach() pour supprimer et restaurer un élément.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
var x;
$("#btn1").click(function(){
<!-- supréssion de l'élément-->
x=$("p").detach();
});
$("#btn2").click(function(){
<!-- restoration de l'élément-->
$("body").prepend(x);
});
});
</script>
</head>
<body>
<p>Ceci est un paragraphe.</p>
<button id="btn1">Suprimer
l'élément p</button>
<button id="btn2">Restorer
l'élément p</button>
</body>
</html>
Comment utiliser la méthode detach() pour déplacer un élément et conserver les données de l'élément jQuery.
Exemple : Copier le code
<!DOCTYPE html>
<html>
<head>
<script
src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("body").append($("p").detach());
});
$("p").click(function(){
$(this).animate({fontSize:"+=1px"})
});
});
</script>
</head>
<body>
<p>Essayez de cliquer sur ce paragraphe, puis
après cliquez sur le bouton Déplacer
l'élément p, et notez qu'il conserve son
événement click. </P>
<button> Déplacer
l'élément p </button>
</body>
</html>
Note : La méthode .detach() est le même que La méthode .remove(), sauf que .detach() conserve toutes les données de jQuery associées aux éléments supprimés. Cette méthode est utile lorsque les éléments supprimés doivent être réinséré dans le DOM, ultérieurement.