jQuery：如何删除表中的 tr 标签？

Question

我想在使用 jQuery 单击删除按钮后删除一个 tr 标签，但它不起作用，我使用了 jQuery 的 remove 方法。 这是HTML代码

<tbody>
<tr class="image-col"  th:each="image : ${session.galleryList}">
    <td><div class="col-sm-4 proj_gallery_grid section_1_gallery_grid">
                <div class="section_1_gallery_grid1">
                    <img th:src="@{'/images/' + ${image.imageURL}}" alt=" " class="img-fluid" />
                </div>
        </div>
    </td>
    <td th:text="${image.title}"></td>
    <td>
    <i style="display: none;" class="image-id" th:text="${image.id}"></i>
    <button class="delete-image-btn btn btn-success btn-block">Delete Image</button></td>
</tr>

这是 jQuery 代码。

$(document).on('click', '.delete-image-btn', function(event) {
    event.preventDefault();
    if (confirm("Are youe sure to delete this image?")) {

        var message = "Image deleted successfully";
        var imageId = $(this).parent().find(".image-id").text();
        $.ajax({
            type: "GET",
            url: "/image/delete_image?imid=" + imageId,
            success: function(result) {
                if (result.status) {
                    $(this).parent().find('.image-col').remove();
                } else {
                    alert(result.message);
                }
            },
            error: function() {
                alert("Error! Please try again");
            }
        });
        return;
    } else {
        return;
    }
});

Answer 1

你可以这样做

$('.delete-image-btn').click(function(){
  $(this).parents('tr').remove();
})

Answer 2

您的 DOM 搜索 tr 和 class 是错误的。您的按钮的父级是 td 而不是 tr。所以要删除tr，你可以使用closest找到tr并删除。

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

喜欢：

$(document).on('click', '.delete-image-btn', function(event) {
 var $this = $(this); // Hold your this state before ajax call

之后：

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

Answer 3

使用_t.parent().parent().remove();

   $(document).on('click', '.delete-image-btn', function(){
   var _t = $(this);
  
   // event.preventDefault();
    if(confirm("Are youe sure to delete this image?")){
    
    _t.parent().parent().remove(); 

        var message = "Image deleted successfully";
        var imageId = $(this).parent().find(".image-id").text();
        
        return false;
    }
    else {
        return false;
    }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<tbody>
<tr class="image-col"  th:each="image : ${session.galleryList}">
    <td><div class="col-sm-4 proj_gallery_grid section_1_gallery_grid">
                <div class="section_1_gallery_grid1">
                    <img th:src="@{'/images/' + ${image.imageURL}}" alt=" " class="img-fluid" />
                </div>
        </div>
    </td>
    <td th:text="${image.title}"></td>
    <td>
      <i style="display: none;" class="image-id" th:text="${image.id}"></i>
      <button class="delete-image-btn btn btn-success ">Delete Image</button>
    </td>
</tr>