如何使用 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>