javascript - 删除嵌套元素时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);
                }    
});

当它的内容发生变化（在这种情况下删除元素）时，如何让带有 id 的 divfoo进行更新（最好是一些漂亮的颜色淡入/淡出） - 而无需刷新浏览器来观察变化？

标签： javascripthtmljquery

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>