如何用原生JavaScript移除第4个之后的同class元素？

需求很明确：用原生JavaScript移除某个class下第4个之后的所有元素。在jQuery里这个需求实现起来非常简洁：

$('.productListItem:nth-child(n+5)').remove();

我一开始想当然以为直接照搬思路就行，毕竟remove()是原生JS的方法，于是写了下面的代码，结果发现完全无效：

let element = document.querySelectorAll('.element:nth-child(n+5)');
element.remove();

原因其实很简单：document.querySelectorAll()返回的是NodeList（节点列表），不是单个DOM元素，所以不能直接在这个列表上调用remove()方法，必须遍历列表里的每一个元素，逐个调用移除方法。

下面是可行的原生JS解决方案：

方法1：用forEach遍历NodeList #

document.querySelectorAll('.productListItem:nth-child(n+5)').forEach(el => el.remove());

方法2：用for循环兼容旧浏览器 #

如果需要兼容不支持NodeList.forEach的旧环境，可以用传统for循环：

const elements = document.querySelectorAll('.productListItem:nth-child(n+5)');
for (let i = 0; i < elements.length; i++) {
  elements[i].remove();
}

这样就能实现和jQuery完全一致的效果了。

内容的提问来源于stack exchange，提问作者Chobbit