asp.net mvc - Deleting row in table with Jquery in mvc project -

i generate following html code

<table>         @for (int = 0; < model.listusers.count; i++)         {             <tr>                  <td> @html.displayfor(m => m.listusers[i].name)</td>                 <td>   @html.displayfor(m => m.listusers[i].phone) </td>                 <td>                     <button type="button" id="delete" data-id="@model.listusers[i].id">delete</button>                 </td>             </tr>         } </table> 

i want delete row,

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

executing this, row deleted works first time, i.e., once.

how can delete row?

ids in html must unique, use class instead can use class selector (".class").

selects elements given class.

html

<button type="button" class="delete" data-id="@model.listusers[i].id">delete</button> 

script

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