如何使用 JQuery 删除动态表的特定行

Question

下面的代码将用户输入的输入值添加到我的 HTML 页面中的表格中，并在每行中添加一个编辑和删除按钮：$("#btnAdd").on('click', function() {    if($("#insert-image").val() !== '' && $("#insert-name").val() !== '' && $("#insert-surname").val() !== ''){        var imagePrep = $("#insert-image").val().replace(/C:\\fakepath\\/i, '');        let row = '<tr> <td>' + "image" + '</td> <td>' + $("#insert-name").val() + '</td> <td>' + $("#insert-surname").val() + '</td> <td>' + "edit" + '</td> <td>' + "delete" + '</td> </tr>'        $('tbody').append(row);        $('td:contains("edit")').html("<i class='fas fa-edit'></i>").addClass("text-center edit edit:hover");        $('td:contains("delete")').html("<i class='far fa-trash-alt'></i>").addClass("text-center delete delete:hover").attr("id", "btnDelete");        $('td:contains("image")').html(image).addClass("text-center");    }});如果用户单击一行的特定删除按钮，我需要该行来确认删除，然后如果他们确认删除，则必须删除该特定行，但我不知道如何从表中删除特定行是动态的，这是我到目前为止所得到的：$("#tbody").on('click','#btnDelete', function() {  $("#delete-modal").modal('show');});$("#btnDeleteConfirmation").on('click', function() {  $("btnDelete").parents("tr").remove();});任何帮助将非常感激。HTML表格代码：    <table class="table table-bordered">        <thead class="thead-dark">            <tr>                <th scope="col">Image</th>                <th scope="col">Name</th>                <th scope="col">Surname</th>                <th scope="col">Edit</th>                <th scope="col">Delete</th>            </tr>        </thead>        <tbody id="tbody">        </tbody>    </table>

Answer 1

您可以使用$(this).closest('tr').remove()这里的示例

$(".delete").on("click",function(){

   $(this).closest('tr').remove();

})

.pointer{

 cursor:pointer;

}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script>

<table class="table table-bordered">

        <thead class="thead-dark">

          <tr>

            <th scope="col">Image</th>

            <th scope="col">Name</th>

            <th scope="col">Surname</th>

            <th scope="col">Edit</th>

            <th scope="col">Delete</th>

          </tr>

          <tr>

            <td scope="col">1</td>

            <td scope="col">1</td>

            <td scope="col">1</td>

            <td scope="col">Edit</td>

            <td class="delete pointer" scope="col">Delete</td>

          </tr>

           <tr>

            <td scope="col">2</td>

            <td scope="col">2</td>

            <td scope="col">2</td>

            <td scope="col">Edit</td>

            <td class="delete pointer" scope="col">Delete</td>

          </tr>

        </thead>

        <tbody id="tbody">

        </tbody>

      </table>

Answer 2

您想要在创建删除按钮的位置添加删除按钮的 onClick 处理程序。这样您就可以使用“this-context”，这使得处理亲戚父母或后代变得更容易。这是您的代码的简化示例，用于演示：

$("#btnAdd").on('click', function() {

    if(

        $("#insert-image").val() !== '' && 

        $("#insert-name").val() !== '' && 

        $("#insert-surname").val() !== ''

    ){

        let row = '<tr><td>image</td><td>name</td><td>surname</td><td>edit</td><td>delete</td></tr>'

        $('tbody').append(row);

        $('td:contains("edit")').html('<button>edit</button')

        $('td:contains("delete")').html('<button>delete</button>')

          //Add your eventhandler here so u can use the parent of "this" button $(this).parent

          .on('click', function() {

              $(this).parents('tr').remove();

          });

    }

});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<table class="table table-bordered">

  <thead class="thead-dark">

    <tr>

      <th scope="col">Image</th>

      <th scope="col">Name</th>

      <th scope="col">Surname</th>

      <th scope="col">Edit</th>

      <th scope="col">Delete</th>

    </tr>

  </thead>

  <tbody id="tbody">

  </tbody>

</table>

<button id="btnAdd">Add</button>