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

Question

I want to delete a tr tag after clicking delete button using jQuery but it is not working, I used remove method of jQuery. This is HTML code

<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>

And this is jQuery code.

$(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

you can do this

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

Answer 2

Your DOM search for tr with class is wrong. Parent of your button is td not tr . So to remove tr you can use closest to find tr and remove.

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

Like:

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

After that :

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

Answer 3

Use _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>