Detach / Attach en jQuery

La fonction .detach() de jQuery permet de supprimer un élément du DOM, tout en gardant un toutes les données ainsi que les event handler (fonctions bindées) en mémoire (contrairement à .remove() qui conserve l'élément en mémoire, mais supprime les données et les handlers).

C'est très utile lorsqu'on souhaite sortir complètement un élément du DOM (et pas juste le masquer via CSS avec la méthode .hide() par exemple) tout en gardant la possibilité de le réinsérer plus tard. Cela peut par exemple servir à conserver une fenêtre popin en mémoire pour pouvoir la réafficher ultérieurement, en restaurant son dernier état.

Voici un petit exemple :

<div class="voiture" id="voiture1">
	<div class="marque">renault</div>
	<div class="couleur">noir</div>
	<input type="text" value="">
</div>

// Detach
var reference = $('#voiture1');
reference.detach();

// Attach
reference.appendTo('body');  // à la fin
reference.prependTo('body'); // au début

La page du jour est défusionner des cellules excel, bonne lecture.

Il n'existe pas de fonction .attach(), pour remettre un élément détaché dans le DOM, il faut utiliser des fonctions de manipulation du DOM tel que .appendTo() ou .prependTo().

Autre remarque : il est nécessaire de récupérer une référence vers l'élément dans une variable (ici : reference) avant de le supprimer, car une fois détaché, l'élément n'appartient plus au DOM et ne peut donc plus être attrapé avec un sélecteur CSS !

Fini de lire cette page ? allez faire un tour ici : cachet de cire, ça peut vous intéresser.