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

#javascript #jquery #html #spring-boot #thymeleaf

#javascript #jquery #HTML #весенняя загрузка #thymeleaf

Вопрос:

Я хочу удалить тег 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;
    }
});

Ответ №1:

Используйте _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>

1. Спасибо Devsi Odedra, это работает… Могу ли я узнать, как работает этот код _t.parent().parent().remove();

2. Я знаю, потому что это случилось со мной однажды, но также closest() должно работать согласно документу, но это не работает, я не знаю причину extact, но с parent().parent(). найдите родительский tr, и вот почему это работает.

Ответ №2:

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

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

Ответ №3:

Ваш поиск в DOM для tr with 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();

1. Большое спасибо за ваш ответ, но он все еще не работает

2. Вы можете проверить в консоли с помощью $(this).closest("tr").length . И дай мне знать, что у тебя получится.

3. А также проверить, что result.status возвращает??

4. Я проверил, что контроль состояния результата поступает внутри инструкции if.

5. $(this).closest(«tr»). длина выдает результат 0