oujood.com

jQuery La méthode .detach() supprimer les éléments sélectionnés

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

search |

Définition et Usage La méthode detach()

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()

Exemple : Suprimer et restaurer un élément

Comment utiliser la méthode detach() pour supprimer et restaurer un élément.

Sélectionner 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>

 

Exemple : Déplacez un élément et garder son événement click

Comment utiliser la méthode detach() pour déplacer un élément et conserver les données de l'élément jQuery.

Sélectionner 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.



Par gerywa 25 juillet 2014

Trafic Booster
hebergement web

SCREEBER - Logiciel de copywriting

SCREEBER - Logiciel de copywriting Augmentez vos résultats en rejoignant les 1600 entrepreneurs qui utilisent Screeber®, le seul logiciel de Copywriting (en français) qui rédige avec vous des textes de vente qui convertissent


HTML5, CSS3, JavaScript pour débutants Tome 1
HTML5, CSS3, JavaScript
pour débutants Tome 1

Premier tome d'une série vidéo dédiée à l'apprentissage des langages HTML, CSS et JavaScript.

Regarder aussi nos cours :

Balise texte pré formaté pre

Définit le texte pré formaté

fonction chunk_split, chunk_split

Scinde une chaîne

PHP gestion d'erreur

Gestion d'erreur



Rentabilisez efficacement votre site

Votre soutien nous aide à faire fonctionner le site
Cette page vous a été utile? Partagez la pour nous encourager à continuer. Merci