suppression de la réception jquery

jQuery est une bibliothèque JavaScript largement utilisée dans le développement Web front-end. En l'utilisant pour améliorer l'interactivité, l'ensemble de l'expérience utilisateur est plus profonde et plus efficace.

Cet article se concentre sur la suppression du frontend jQuery. La suppression est une partie inévitable du processus de développement frontal. Pour les opérations d’ajout, de suppression, de modification et de requête de données, une interaction des données avec le backend est généralement requise. Cependant, l'utilisation de la suppression frontale de jQuery peut éliminer le besoin d'interaction des données avec le back-end, simplifiant ainsi le processus d'exploitation de la page.

La suppression du premier plan est divisée en deux situations : la suppression de données statiques et la suppression de données dynamiques. Ils seront présentés séparément ci-dessous.

1. Supprimer les données statiques

Les données dites statiques font référence aux données qui existent déjà lors du chargement de la page, telles que du texte ou des images HTML, etc. La suppression des données statiques peut être réalisée via la méthode remove() dans jQuery, qui peut supprimer des éléments spécifiés.

Par exemple, nous créons une liste avec un bouton Supprimer dans chaque ligne. Cliquez sur le bouton Supprimer pour supprimer l'intégralité de l'élément de liste. Le code HTML est le suivant :

<ul>
  <li>列表项1 <button class="remove">删除</button></li>
  <li>列表项2 <button class="remove">删除</button></li>
  <li>列表项3 <button class="remove">删除</button></li>
  <li>列表项4 <button class="remove">删除</button></li>
</ul>

Ensuite, nous devons utiliser le sélecteur jQuery pour trouver l'élément à supprimer et lier un événement de clic sur le bouton de suppression.

$(document).ready(function(){
  $('.remove').click(function(){
    $(this).parent().remove();
  });
});

Dans le code ci-dessus, $(document).ready() indique que la page a été chargée et $('.remove') indique que tous les boutons de suppression sont trouvés en sélectionnant le nom de classe du bouton. Récupérez ensuite l’élément de liste où se trouve le bouton en appelant la méthode parent(), puis utilisez la méthode Remove() pour supprimer l’élément de liste.

2. Supprimer les données dynamiques

Les données dynamiques font référence aux données obtenues via JavaScript et l'interaction des données back-end sur la page. Lors de la suppression de données dynamiques, nous devons envoyer une requête au serveur via AJAX pour indiquer au serveur quelles données supprimer, et une fois la suppression réussie, mettre à jour l'affichage des données sur la page.

La structure HTML est la suivante :

<div class="list-container">
  <ul id="data-list">
    <li>动态数据1 <button class="remove" data-id="1">删除</button></li>
    <li>动态数据2 <button class="remove" data-id="2">删除</button></li>
    <li>动态数据3 <button class="remove" data-id="3">删除</button></li>
    <li>动态数据4 <button class="remove" data-id="4">删除</button></li>
  </ul>
</div>

Dans le code HTML ci-dessus, nous définissons le data-id pour représenter la valeur id de chaque ligne de données afin de faciliter l'identification lors de la suppression.

Ci-dessous, nous utilisons jQuery pour envoyer une requête AJAX au serveur, supprimer les données spécifiées et actualiser la page.

$(document).ready(function(){
  $('.remove').click(function(){
    var id = $(this).data('id');
    $.ajax({
      type: 'POST',
      url: '/delete.php',
      data: {id: id},
      success: function(data){
        if (data.success) {
          $('#data-list li[data-id="'+id+'"]').remove();
        }
      }
    });
  });
});

Dans le code ci-dessus, $(this).data('id') signifie obtenir la valeur data-id du bouton actuel ; la méthode $.ajax() signifie envoyer une requête AJAX et utiliser le sélecteur jQuery. dans la fonction de rappel de réussite de la suppression, sélectionnez l'élément que vous souhaitez supprimer et supprimez-le.

Résumé

Cet article présente la suppression frontale de jQuery, qui nous permet d'enregistrer l'interaction des données avec le back-end via des opérations frontales. La suppression des données statiques peut être réalisée via la méthode Remove(), tandis que la suppression des données dynamiques nécessite l'envoi d'une requête au serveur via AJAX et l'actualisation de la page. En utilisant la suppression frontale jQuery, l'ensemble du processus opérationnel peut être rendu plus simple, plus rapide et plus fluide, offrant aux utilisateurs une meilleure expérience.

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!