我想使用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}}" 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;
}
});
答案 0 :(得分:0)
你可以做到
$('.delete-image-btn').click(function(){
$(this).parents('tr').remove();
})
答案 1 :(得分:0)
您的tr
用class
的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();
答案 2 :(得分:0)
使用_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>