Maison  >  Article  >  interface Web  >  Comment supprimer un élément avec jquery

Comment supprimer un élément avec jquery

青灯夜游
青灯夜游original
2022-03-16 18:12:265346parcourir

Comment supprimer un élément avec jquery : 1. Utilisez la fonction empty() avec la syntaxe "spécifiez l'élément object.empty()" ; 2. Utilisez la fonction remove() avec la syntaxe "spécifiez l'élément object.remove" ; ()"; 3. , utilisez la fonction detach(), la syntaxe est "spécifiez l'élément object.detach()".

Comment supprimer un élément avec jquery

L'environnement d'exploitation de ce tutoriel : système Windows 7, jquery version 1.10.2, ordinateur Dell G3.

Méthode de suppression d'éléments jQuery

1. Méthode empty()

Supprime tous les nœuds enfants des éléments correspondants dans la collection du DOM.
Exemple :

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Méthode de suppression :

$(&#39;.hello&#39;).empty();

Effet :

<div class="container">
   <div class="hello"></div>
   <div class="goodbye">Goodbye</div>
</div>

Si

contient un certain nombre d'éléments imbriqués, ils seront également supprimés.
Afin d'éviter les fuites de mémoire, jQuery supprime d'abord les fonctions de gestion des données et des événements des éléments enfants, puis supprime les éléments enfants

2. Méthode remove() :

Description : Supprimer l'ensemble des correspondances éléments du DOM. (Supprime également les événements et les données jQuery sur l'élément.)

Similaire à .empty(). .remove() déplace l'élément hors du DOM. Lorsque nous voulons supprimer l'élément lui-même, nous utilisons .remove(), qui supprimera également tout ce qui se trouve à l'intérieur de l'élément, y compris les événements liés et les données jQuery liées à l'élément

Exemple :

<div class="container">
  <div class="hello">Hello</div>
  <div class="goodbye">Goodbye</div>
</div>

Méthode Remove :

$(&#39;.hello&#39;).remove();
或者用
$(&#39;div&#39;).remove(&#39;.hello&#39;);

Effet :

<div class="container">
   <div class="goodbye">Goodbye</div>
</div>

C'est-à-dire que le p correspondant à la classe est également supprimé

3. Méthode detach() :

Supprimer tous les éléments correspondants du DOM

La méthode detach() est la même comme .remove(), sauf que .detach() enregistre toutes les données jQuery associées à l'élément supprimé. Cette méthode est utile lorsqu'un élément doit être supprimé puis inséré dans le DOM.

4. Méthode html("") : La méthode

html() renvoie le contenu actuel de l'élément sélectionné si aucun paramètre n'est défini. html("") efface le contenu actuel de l'élément sélectionné. La méthode

empty() supprime tout le contenu de l'élément sélectionné, y compris tout le texte et les nœuds enfants.

L'effet final des deux est le même

  • Valeur de retour html() : String, ce qui signifie qu'elle peut être reçue à l'aide de variables

  • Valeur de retour vide() : jQuery ne peut pas être reçu à l'aide de variables

De plus : la méthode

empty() n'a aucun paramètre et le sous-ensemble et le texte effacés ne peuvent pas être restaurés. Les méthodes detach() et remove() peuvent l'enregistrer dans une variable
Par exemple, déclarez la variable p et écrivez-la sous la forme suivante

var p=$(&#39;p&#39;).remove();

Lorsque vous devez l'ajouter à partir de zéro, vous pouvez l'ajouter directement comme suit

p.appendTo("body");

Il s'agit des méthodes detach() et remove(). Toutes ont des fonctions. La différence entre Remove() et detach() est que Remove() peut supprimer des classes spécifiées telles que Remove('a'), mais detach() ne peut pas le faire.

Notez également que Lorsque vous utilisez la méthode remove() pour supprimer un élément puis l'ajouter, les événements du sous-ensemble n'existeront pas, mais les événements du sous-ensemble detach() peuvent toujours être exécutés.

【Apprentissage recommandé : Tutoriel vidéo jQuery, Vidéo de développement web front-end

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

Déclaration:
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn