遍历具有相同类的元素并删除它们

Question

我正在构建一个应用程序，需要从标头中删除具有特定类的所有链接元素。我已经建立了一个在w3schools编辑器中遇到的问题的示例。

为了重现该问题，我在类头中添加了多个相同的链接，并添加了“ link-to-remove”类：

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">

这是我用来删除链接的功能：

function removeLinks() {
  const head = document.getElementsByTagName('head')[0];
        const links = head.getElementsByClassName('link-to-remove');
        for(let i = 0; i < links.length; i++) {
            head.removeChild(links[i]);
        }
}

该函数具有删除所有链接元素的逻辑，但是每次仅删除一些。只有多次按下触发该功能的按钮后，所有链接才会被删除。（在示例中，当引导表格样式消失时，所有链接都被删除）

示例：https： //www.w3schools.com/code/tryit.asp？filename = G36L0TRX06V3

我需要在此功能中进行哪些更改，使其在首次触发时删除所有链接？

Answer 1

问题是getElementsByClassName返回一个live- HTMLCollection如果您在迭代期间从其中删除一个元素，则在删除它时集合将发生变化。例如：

const foos = document.getElementsByClassName('foo');
console.log(foos[1].textContent);
foos[0].remove();
console.log(foos[1].textContent);

<div class="foo">a</div>
<div class="foo">b</div>
<div class="foo">c</div>

这很不直观。在集合中向后迭代（例如，从length - 1，到length - 2... 0），以确保每个元素都被迭代，或者querySelectorAll改为使用它返回一个static NodeList：

const links = head.querySelectorAll('.link-to-remove');

另一个好处querySelectorAll是，较新的浏览器支持forEachNodeLists，因此您可以直接对其进行迭代，而不必使用丑陋的for循环：

document.querySelectorAll('head .link-to-remove').forEach((removeMe) => {
  removeMe.remove();
});

（如您所见，head如果将放在head传递给的查询字符串中，则无需选择querySelectorAll-您也可以remove()直接使用元素，而不必引用其父元素并使用removeChild）