jQuery.remove()不起作用，而其他内置函数则起作用

Question

我想从DOM中删除一个div，但由于某种原因.remove（）不起作用。我认为这是一个错误的选择器，但我可以用.html（）获得html。这是我的代码：

HTML:

<div id="collectionsHeading" class="filter-toggle-heading ui-accordion-header ui-helper-reset ui-state-default ui-corner-all" role="tab" aria-expanded="false" aria-selected="false" tabindex="-1">
  <span class="ui-icon ui-icon-triangle-1-e"></span>
  <i class="icon-caret-down"></i>
  Collection
  <div class="filter-applied">
    <span class="right">(8)</span>
    Internal
  </div>
</div>

jQuery/Javascript

$('#collections').val(collections);
var selectedCollection = $('#collectionList').children('#'+collections).html();
var headingValue = $('#collectionsHeading').html();
$('#collectionsHeading').find('.filter-applied').remove();
$('#collectionsHeading').html(headingValue+'<div class="filter-applied">'+selectedCollection+'</div>');

我尝试过的其他方法是.children（），并将其全部放入第一个选择器中。所有情况下都允许我提取.html（），但.remove（）永远不起作用。有什么想法吗？

Answer 1

删除操作很好，只是对最终结果没有影响。

在这里，您可以获得标题中的HTML代码：

var headingValue = $('#collectionsHeading').html();

在这里，您可以从标题中删除一个元素：

$('#collectionsHeading').find('.filter-applied').remove();

在这里，你删除了标题中的所有内容，并将删除该元素之前的所有内容加上另一个元素：

$('#collectionsHeading').html(headingValue+'<div class="filter-applied">'+selectedCollection+'</div>');

因此，删除元素没有任何效果，因为在删除元素之前，您会获得它的HTML代码，然后使用该HTML代码将所有原始元素放回原处。

我认为你想要的是删除元素，然后添加它的新版本。不要把HTML代码放回原处，只需使用remove和append来删除和添加元素：

$('#collectionsHeading').find('.filter-applied').remove();
$('#collectionsHeading').append('<div class="filter-applied">'+selectedCollection+'</div>');

Answer 2

似乎运行良好

$('#collectionsHeading').find('.filter-applied').remove();

这是一把小提琴。。。如果你把一行注释掉，然后点击播放，这个对象就不会被删除。

http://jsfiddle.net/bY42X/

也许是您使用的jQuery版本有问题，或者可能在dom准备好之前就启动了？