Suppression d’une ligne dans la table avec Jquery dans le projet MVC

Je génère le code html suivant

  @for (int i = 0; i < Model.listUsers.Count; i++) {  } 
@Html.DisplayFor(m => m.listUsers[i].Name) @Html.DisplayFor(m => m.listUsers[i].Phone)

Je veux supprimer une ligne,

  $(document).ready(function () { $("#delete").on("click", function () { var tr = $(this).closest('tr'); tr.remove(); }); });  

En exécutant ceci, la ligne est supprimée mais elle ne fonctionne que la première fois, c’est-à-dire une seule fois.

Comment puis-je supprimer une ligne?

Les identifiants en HTML doivent être uniques , utilisez plutôt une classe, puis utilisez le sélecteur de classe (“.class”) .

Sélectionne tous les éléments avec la classe donnée.

HTML

  

Scénario

 $(document).ready(function () { $(".delete").on("click", function () { var tr = $(this).closest('tr'); tr.remove(); }); }); 

Vous générez des atsortingbuts d’ id double pour votre bouton qui n’est pas valide html et le script ne sera appelé qu’une seule fois car vous supprimez ensuite le bouton. Au lieu de cela, supprimez l’ id et utilisez un nom de classe

  

et modifiez le script pour

 $(".delete").on("click", function () { var tr = $(this).closest('tr'); tr.remove(); }); 

Vous rendez un bouton avec le même id plusieurs fois, ce qui n’est pas le html . Chaque fois que vous lui appliquez un sélecteur, il sélectionne le premier élément trouvé dans DOM avec l’identifiant supprimé . Rendre l’ id unique en ajoutant l’id qui arrive dans Model et append un atsortingbut de class au bouton:

  

Appliquez maintenant un événement de clic sur la classe:

 $(".delete").on("click", function () { var tr = $(this).closest('tr'); tr.remove(); }); 

remplacer cet identifiant par la classe car l’identifiant est en double

    @Html.DisplayFor(m => m.listUsers[i].Name)  @Html.DisplayFor(m => m.listUsers[i].Phone)