Comment supprimer la ligne actuelle dans jquery

jQuery est une bibliothèque JavaScript largement utilisée dans le développement web front-end. Elle est facile à utiliser, puissante et compatible avec tous les navigateurs. À l'aide de jQuery, vous pouvez facilement implémenter des effets interactifs complexes, mettre à jour dynamiquement le contenu de la page et augmenter l'interactivité des pages. Parmi elles, la suppression de la ligne actuelle est une fonction couramment utilisée et courante en développement. Si vous ne savez pas comment utiliser jQuery pour y parvenir, cet article vous présentera comment utiliser jQuery pour supprimer la ligne actuelle.

1. Sélecteur jQuery

Avant de supprimer la ligne actuelle, vous devez d'abord comprendre le sélecteur jQuery. Le sélecteur jQuery est une syntaxe similaire au sélecteur CSS, qui peut sélectionner des éléments DOM par nom de balise, nom de classe, ID, etc.

Les sélecteurs jQuery couramment utilisés sont les suivants :

1. Sélecteur de balise : $("nom de la balise"), tel que : $("p") signifie sélectionner toutes les balises p.
2. Sélecteur de classe : $(".class name"), tel que : $(".demo") signifie sélectionner tous les éléments avec la démo de classe.
3. Sélecteur d'ID : $("#ID name"), tel que : $("#demo") signifie sélectionner l'élément avec l'identifiant de la démo.
4. Sélecteur d'attribut : $("[nom de l'attribut]"), tel que : $("[href]") signifie sélectionner tous les éléments contenant l'attribut href.
5. Sélecteur composite : vous pouvez mélanger et utiliser les sélecteurs ci-dessus pour un filtrage multi-conditions, tel que : $("ul li.active") signifie sélectionner toutes les balises li avec la classe active.

2. Implémentation du code de suppression de la ligne actuelle

Avec la base du sélecteur jQuery, vous pouvez ensuite supprimer la ligne actuelle. Tout d'abord, vous devez configurer le tableau en HTML et définir la valeur de l'attribut de classe du bouton de suppression sur "delete-btn". Le code est le suivant :

<table>
  <thead>
    <tr>
      <th>编号</th>
      <th>姓名</th>
      <th>操作</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>1</td>
      <td>小明</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>2</td>
      <td>小红</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
    <tr>
      <td>3</td>
      <td>小刚</td>
      <td><button class="delete-btn">删除</button></td>
    </tr>
  </tbody>
</table>

Après la configuration en HTML, vous devez écrire du code jQuery en JavaScript pour implémenter la fonction de suppression. Le code spécifique est le suivant :

<script>
$(function() {
  $(".delete-btn").on("click", function() {
    $(this).parents("tr").remove();
  });
});
</script>

Dans le code ci-dessus, la fonction $() signifie trouver tous les éléments de bouton avec la classe "delete-btn" et leur ajouter un écouteur d'événement de clic lorsque le bouton est cliqué, son parent ; l'élément tr est supprimé de la structure DOM. Cela facilite la suppression de la ligne actuelle.

3. Résumé

Grâce au code d'implémentation ci-dessus, nous pouvons voir qu'il est très simple d'utiliser jQuery pour supprimer la ligne actuelle. Il vous suffit de comprendre le sélecteur jQuery et le mécanisme d'écoute des événements. Dans l'ensemble, jQuery rend le développement Web plus facile et plus efficace, tout en améliorant l'interactivité et l'expérience utilisateur des pages Web. J'espère que cet article pourra être utile aux débutants.

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!