从页面中删除除数组中包含的元素及其父元素/子元素之外的所有元素

Removing all elements from a page except those contained within an array and their parents/children?

本文关键字:元素 删除 数组 包含      更新时间:2023-09-26

我想在以这种方式生成的页面上保留一个元素数组。棘手的是,我需要保留父母和孩子的这些元素。

var maps = document.querySelectorAll("[id^=map]")

我想使用jQuery的过滤器从页面中删除除数组中包含的div之外的所有div。不过我还是不能让它发挥作用。我试过了:

var all = $("div").get()
$(all)
  .filter(function( index ) {
      return $.inArray(this, maps) === -1;
  }).remove()

这删除了页面中的所有元素。我认为这是在消除父母和他们的孩子,而不管孩子是否被想要。我试着在函数中放入另一个过滤函数,添加一些嵌套的条件,但它开始变得一团糟。有更优雅的方法吗?我不一定需要使用.filter()

部分原因可能是您没有从筛选函数返回值。

但如果我理解正确,你可以看看元素及其所有内容:

$(all)
  .filter(function( index ) {
      $this = $(this);
      return !($this.is("[id^=map]") || $this.find("[id^=map]").length > 0);
  }).remove()

您可以首先尝试使用复杂的css选择器,如下所示:

$('div:not(div:has(.keep), div.keep)').remove();

http://jsfiddle.net/e_neko/k0bq6gzx/这将定位所需的元素并一次性删除其他元素。