jQuery在移除嵌套元素时更新祖先内容

Question

我正在使用jQuery 3.6

我正在从页面的一部分删除嵌套元素，我希望页面的该部分自动更新，以反映更改-我原本希望浏览器自动更新修改后的部分，但它没有，只有当我刷新页面时，更改才可见。

以下是HTML的一个片段：

<div id="foo" class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a id="abc-1"><img src="image1"></a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a id="abc-2"><img src="image2"></a>
</div>
<!-- etc -->
</div>

以下是我的Javascript片段：

$.ajax({
type: 'post',
url: "/path/to/post/to",
data: {'identifier': $(this).attr('id'), 'status':1, 'csrfmiddlewaretoken': '1234567abc'},,
success: function(data) {
/* assume we have variable named 'identifier' ... */
$(`a#${identifier}`).parent().remove();

/* next two lines is a brute-force attempt to
force the element to update - but it still
doesn't update, until I refresh the page!
*/
let remaining_content = $('div#foo').html()
$('div#foo').html(remaining_content);
},
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(status);
alert(error);
alert(err.Message);
}    
});

当div的内容发生变化(在这种情况下是删除元素(时，我如何让id为foo的div进行更新(最好是使用一些漂亮的颜色淡入/淡出(，而不必刷新浏览器来观察变化？

Answer 1

您可以访问用$(this)单击的元素，也可以使用css和应用changed类显示更新

$('[data-rel=remove]').click(function() {
/*$.ajax({
type: 'post',
url: "/path/to/post/to",
data: {
'identifier': $(this).attr('id'),
'status': 1,
'csrfmiddlewaretoken': '1234567abc'
},
success: function(data) {
// assume we have variable named 'identifier' ...  

*/
$(this).parent().remove();
onChanged('div#foo');
/*
},
error: function(xhr, status, error) {
var err = JSON.parse(xhr.responseText);
alert(status);
alert(error);
alert(err.Message);
}
});
*/
})
const onChanged = (el) => {
$(el).addClass('changed')
setTimeout(() => $(el).removeClass('changed'), 500)
}

div {
padding: 15px;
transition: background-color .5s, border .5s;
border: 1px solid transparent;
}
div.changed {
background-color: #FEFFAA;
border: 1px dashed yellow;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="foo" class="row text-center text-lg-left">
<div class="col-lg-3 col-md-4 col-6">
<a data-rel='remove' id="abc-1">Click to remove </a>
</div>
<div class="col-lg-3 col-md-4 col-6">
<a data-rel='remove' id="abc-2">Click to remove</a>
</div>
<!-- etc -->
</div>