我想在使用jQuery单击删除按钮后删除TR标签,但它不起作用,我使用了删除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;
}
});
使用 _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>
您可以做这个
$('.delete-image-btn').click(function(){
$(this).parents('tr').remove();
})
您使用class
对tr
的DOM搜索是错误的。您的按钮的父级是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();