jQuery: как удалить тег tr в таблице? - PullRequest
Новая
       18

jQuery: как удалить тег tr в таблице?

0 голосов
/ 21 марта 2019

Я хочу удалить тег tr после нажатия кнопки удаления с помощью jQuery, но он не работает, я использовал метод удаления из jQuery. Это 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;
    }
});

Ответы [ 3 ]

0 голосов
/ 21 марта 2019

Ваш поиск 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();
0 голосов
/ 21 марта 2019

Использование _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>
0 голосов
/ 21 марта 2019

вы можете сделать это 

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