如何使用 for 循环删除与下拉列表值不匹配的类实例？

Question

我正在尝试使用下拉菜单在我的页面上实施过滤，并通过使用循环比较项目来删除与下拉选择不匹配的类。但是，当我执行代码时，看似随机选择的项目被删除。也许它不是随机的，但我无法弄清楚如何选择删除的项目。我确定我编写代码的方式有问题，但我不确定我哪里出错了。

当我将变量记录到控制台时，它们按预期显示。

const filter = document.querySelector('.mainFilter');

if (filter) {
  var testing = document.getElementsByClassName('bigMomma');
  var testing2 = testing[0].getElementsByClassName('innerArticle');
  console.log(testing2[1].className);
  filter.addEventListener('change', () => {
    var filterValue = filter.value;
    var classNameCompare = `innerArticle ${filterValue}`;
    console.log(classNameCompare);
    for (let i = 0; i < testing2.length; i++) {
      if (testing2[i].className === classNameCompare) {
        console.log(`All good.`);
      } else {
        testing2[i].remove();
      }
    }
  });
}

Answer 1

getElementsByClassName returns 一个不直观的 live 集合，它包含文档中匹配 class at 的所有元素集合被检查的那个瞬间。因此，如果您 .remove() 来自 DOM 的 class 之一，当您迭代集合 时，集合的索引将重新排列为填充由删除的元素创建的孔。例如：

const coll = document.getElementsByClassName('foo');
for (let i = 0; i < coll.length; i++) {
  coll[i].remove();
}

<div class="foo">foo</div>
<div class="foo">foo</div>

正如你在上面看到的，第二个元素仍然存在于 DOM 中，因为当第一个被移除时，索引重新排列自己，所以在下一次迭代中，当 i 为 1 时，循环停止。

最简单的解决方案是改用 querySelectorAll，其中 returns 一个 static NodeList，在您对其进行迭代时不会自行改变。变化：

var testing = document.getElementsByClassName('bigMomma');
var testing2 = testing[0].getElementsByClassName('innerArticle');

到

const innerArticles = document.querySelectorAll('.bigMomma .innerArticle');

然后在需要时引用其中的 innerArticles 和 .remove() 个元素。

如何使用 for 循环删除与下拉列表值不匹配的类实例？

How do I remove instances of classes that do not match a dropdown value using a for loop?

javascript

for-loop

getelementsbyclassname

如何使用 for 循环删除与下拉列表值不匹配的 类 实例？

How do I remove instances of classes that do not match a dropdown value using a for loop?

javascript

for-loop

getelementsbyclassname

如何使用 for 循环删除与下拉列表值不匹配的类实例？