Jquery remove() 不刷新 div 列表答案

【问题标题】：Jquery remove() not refreshing list of divsJquery remove() 不刷新 div 列表
【发布时间】：2015-03-19 22:02:49
【问题描述】：

我正在显示缩略图图库，当我选择缩略图中的删除按钮时，我可以从图库中删除缩略图，但它不会刷新，缩略图所在的位置会留下空白。我试过了， .sort() 没有运气。任何帮助将不胜感激！

$('.close').click(function() {
  $(this).parent('div').remove();
  $("#sortable").sort();
});

<div id="sortable">
  @foreach (var image in Model.Images) { 
  <div class="col-sm-6 col-md-4">
    <div class="thumbnail">
      <a class="close" href="#">×</a>
      @{ var base64 = Convert.ToBase64String(image.ImageThumbnail); var thumbSrc = String.Format("data:image/gif;base64,{0}", base64); var base64Modal = Convert.ToBase64String(image.Image); var imgSrcModal = String.Format("data:image/gif;base64,{0}", base64Modal);
      var imageId = "pop" + image.YogaSpaceImageId; var imagesourceId = "imagesource" + image.YogaSpaceImageId; }
      <a class="image" id="@imageId" href="" data-toggle="modal" data-target="#myModal">
        <img id="@imagesourceId" src="@thumbSrc" data-imagesrc="@imgSrcModal" alt="image not found" width="203" height="136" />
      </a>
      <div class="caption">
        <h3>Thumbnail label</h3>
        <p>...</p>
        <p><a href="#" class="btn btn-primary" role="button">Button</a>  <a href="#" class="btn btn-default" role="button">Button</a>
        </p>
      </div>
    </div>
  </div>
  }
</div>

【问题讨论】：

标签： javascript jquery html jquery-ui-sortable

【解决方案1】：

由于您的元素是一个超链接，我认为您需要在事件上调用 preventDefault() 以防止浏览器事件冒泡。

另外，我建议使用 .on 而不是 .click，因为前者可以使用更少的内存。

$('.close').on('click', function(event) {
    event.preventDefault();
    $(this).parent('div').remove();
    $("#sortable").sort();
});

【讨论】：

【解决方案2】：

有两个 div 包含一个带有 close 类的标签。所以我想应该是

$('.close').click(function() { $(this).parent().parent().remove(); $("#sortable").sort(); });

【讨论】：

【解决方案3】：

尝试类似：

$("#sortable").sortable({
      connectWith: "ul",
      dropOnEmpty: false
});

【讨论】：