javascript - 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>');