Comment supprimer un élément avec jquery

青灯夜游
Libérer: 2022-03-16 18:15:23
original
5410 Les gens l'ont consulté

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>
Copier après la connexion
Copier après la connexion

Méthode de suppression :

$(&#39;.hello&#39;).empty();
Copier après la connexion

Effet :

<div class="container">
   <div class="hello"></div>
   <div class="goodbye">Goodbye</div>
</div>
Copier après la connexion

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>
Copier après la connexion
Copier après la connexion

Méthode Remove :

$(&#39;.hello&#39;).remove();
或者用
$(&#39;div&#39;).remove(&#39;.hello&#39;);
Copier après la connexion

Effet :

<div class="container">
   <div class="goodbye">Goodbye</div>
</div>
Copier après la connexion

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();
Copier après la connexion

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

p.appendTo("body");
Copier après la connexion

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!

Étiquettes associées:
source:php.cn
Déclaration de ce site Web
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
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal