Définit le bord de la marge de fond pour une boîte placée
La méthode remove() supprime les éléments sélectionnés, y compris tous les nœuds de texte et les enfants
La méthode .remove() en jQuery permet de supprimer des éléments HTML sélectionnés, y compris tous leurs nœuds de texte et enfants, du DOM. En d'autres termes, elle efface totalement l'élément et ses dépendances, rendant ainsi l'élément et son contenu inaccessibles.
Note : La méthode .remove() est particulièrement utile lorsque vous souhaitez non seulement retirer un élément, mais aussi tous ses sous-éléments et gestionnaires d'événements associés. Cela contraste avec la méthode .empty(), qui supprime seulement le contenu interne d'un élément sans supprimer l'élément lui-même.
Si vous souhaitez conserver les données et les événements associés tout en retirant l'élément du DOM, il est recommandé d'utiliser la méthode .detach().
$(sélecteur).remove()
La syntaxe est simple : vous sélectionnez l'élément que vous souhaitez supprimer en utilisant un sélecteur jQuery, puis vous appliquez la méthode .remove(). Cette opération supprime l'élément du DOM, ainsi que tous ses enfants et événements.
La méthode .remove() est souvent utilisée pour gérer dynamiquement le contenu d'une page en supprimant des éléments devenus obsolètes, inutiles ou en réponse à des actions de l'utilisateur. Elle est particulièrement utile pour améliorer la performance en retirant des éléments non utilisés, ou pour des interfaces utilisateur interactives où certains éléments doivent être retirés pour faire de la place à de nouveaux contenus.
Examinons un exemple concret d'utilisation de .remove() :
HTML de départ :
<div class="conteneur"> <div class="bonjour">Bonjour</div> <div class="aurevoir">Au revoir</div> </div>
Supposons que nous voulons supprimer le div avec la classe bonjour :
$('.bonjour').remove();
Résultat :
<div class="conteneur"> <div class="aurevoir">Au revoir</div> </div>
Dans cet exemple, le div avec la classe bonjour et tout son contenu ont été supprimés. Si cet élément contenait des événements ou des données jQuery, ceux-ci auraient également été supprimés.
La méthode .remove() peut aussi accepter un sélecteur en paramètre pour affiner la suppression :
$('div').remove('.bonjour');
Ce code produira le même résultat que l'exemple précédent.
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(){ $("p").remove(); }); }); </script> </head> <body> <p>Ceci est un paragraphe.</p> <p>Ceci est un autre paragraphe.</p> <button>Supprimer touts les éléments p </button> </body> </html>