如何使用 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(){&nbsp; &nbsp;$(this).closest('tr').remove();}).pointer{&nbsp;cursor:pointer;}<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js"></script><table class="table table-bordered">&nbsp; &nbsp; &nbsp; &nbsp; <thead class="thead-dark">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Image</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Name</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Surname</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Edit</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <th scope="col">Delete</th>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td scope="col">1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td scope="col">1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td scope="col">1</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td scope="col">Edit</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="delete pointer" scope="col">Delete</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;<tr>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td scope="col">2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td scope="col">2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td scope="col">2</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td scope="col">Edit</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <td class="delete pointer" scope="col">Delete</td>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </tr>&nbsp; &nbsp; &nbsp; &nbsp; </thead>&nbsp; &nbsp; &nbsp; &nbsp; <tbody id="tbody">&nbsp; &nbsp; &nbsp; &nbsp; </tbody>&nbsp; &nbsp; &nbsp; </table>

Answer 2

您想要在创建删除按钮的位置添加删除按钮的 onClick 处理程序。这样您就可以使用“this-context”，这使得处理亲戚父母或后代变得更容易。这是您的代码的简化示例，用于演示：$("#btnAdd").on('click', function() {&nbsp; &nbsp; if(&nbsp; &nbsp; &nbsp; &nbsp; $("#insert-image").val() !== '' &&&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $("#insert-name").val() !== '' &&&nbsp;&nbsp; &nbsp; &nbsp; &nbsp; $("#insert-surname").val() !== ''&nbsp; &nbsp; ){&nbsp; &nbsp; &nbsp; &nbsp; let row = '<tr><td>image</td><td>name</td><td>surname</td><td>edit</td><td>delete</td></tr>'&nbsp; &nbsp; &nbsp; &nbsp; $('tbody').append(row);&nbsp; &nbsp; &nbsp; &nbsp; $('td:contains("edit")').html('<button>edit</button')&nbsp; &nbsp; &nbsp; &nbsp; $('td:contains("delete")').html('<button>delete</button>')&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; //Add your eventhandler here so u can use the parent of "this" button $(this).parent&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; .on('click', function() {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; $(this).parents('tr').remove();&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; });&nbsp; &nbsp; }});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><table class="table table-bordered">&nbsp; <thead class="thead-dark">&nbsp; &nbsp; <tr>&nbsp; &nbsp; &nbsp; <th scope="col">Image</th>&nbsp; &nbsp; &nbsp; <th scope="col">Name</th>&nbsp; &nbsp; &nbsp; <th scope="col">Surname</th>&nbsp; &nbsp; &nbsp; <th scope="col">Edit</th>&nbsp; &nbsp; &nbsp; <th scope="col">Delete</th>&nbsp; &nbsp; </tr>&nbsp; </thead>&nbsp; <tbody id="tbody">&nbsp; </tbody></table><button id="btnAdd">Add</button>