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

Posted 2023-02-26

【中文标题】jQuery：如何删除表中的 tr 标签？

【英文标题】：jQuery: How to remove a tr tag in a table?

【发布时间】：2019-08-11 22:25:08

【问题描述】：

我想在使用 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"  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;
    
);

【参考方案1】：

你可以这样做

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

【讨论】：

先生，此解决方案也不提供输出。

【参考方案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();

【讨论】：

感谢您的回答，但仍然无法正常工作

您可以使用$(this).closest("tr").length 在控制台中签入。让我知道你得到了什么。

还要检查result.status返回什么？？

我检查了结果状态控制是否进入了 if 语句。

$(this).closest("tr").length 给出输出 0

【参考方案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"  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>

【讨论】：

感谢 Devsi Odedra 它正在工作...我可以知道这段代码是如何工作的 _t.parent().parent().remove();

我知道，因为它发生在我身上一次，而且closest() 必须按照文档工作但它不起作用，我不知道确切的原因，但使用 parent().parent()。找到一个父 tr，这就是它起作用的原因。