Supprimer un élément du DOM avec jQuery

Août 2013

Pour supprimer un élément de la page web en utilisant jQuery, la première étape est de le sélectionner avec un sélecteur CSS jQuery, pour ensuite appeler la fonction .remove(). Voici une page d'exemple :

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Lorem ipsum</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
</head>

<body>
	<h1>Lorem</h1>
	<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas.</p>
	<ul>
	   <li>Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
	   <li>Aliquam tincidunt mauris eu risus.</li>
	   <li>Vestibulum auctor dapibus neque.</li>
	</ul>
</body>
</html>

Et voilà comment supprimer un élément, par exemple la liste à puces :

$('body>ul').remove();

On peut aussi simplement vider tout le contenu de l'élément sans pour autant le supprimer :

$('body>ul').empty();

jQuery .detach()

La fonction .detach() permet de supprimer un élément de la page web sans pour autant le supprimer de la mémoire. C'est à dire que l'élément détaché va disparaitre de la structure HTML de la page web (autrement dit, le DOM), mais il va rester dans la mémoire, accessible via une variable, pour pouvoir éventuellement être réinjecté dans le DOM plus tard, après un appel AJAX par exemple.

Un élément détaché conserve toutes ses propriétés, notamment les handler qui sont attribués à l'élément, comme le onclick, onchange... et tous les autres événements. Voilà un exemple :

Cette page peut vous intéresser : changer la couleur du texte sur excel à lire tout de suite !

var element_detache = $('body>ul').detach();

À partir de là, l'élément n'existe plus, et il n'est accessible qu'à partir de la variable retournée par la fonction detach (par référence). C'est pour cette raison qu'il est indispensable de récupérer cette référence dans une variable (ici je l'ai nommée element_detache). Si on ne fait pas cette affectation, on n’a plus aucune référence et la variable est inaccessible, elle sera bientôt supprimée par le garbage collector du moteur javascript du navigateur.

Pour ré-attacher un élément détaché à la page, il n'existe pas de fonction .attach(), il suffit simplement d'utiliser les fonctions classiques pour insérer un élément dans le DOM : .append(), .prepend(), .appendTo(), .prependTo(), .before() ou encore .after().

Encore faim ? allez lire ça : texte paquet cadeau !

Fil de lecture

0 commentaire