遍历具有相同类的元素并将其删除 [英] Iterate through elements with the same class and remove them

问题描述

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

I'm building an app and I need to remove all link elements with a specific class from the header. I've built an example of the problem I'm having in the w3schools editor.

出于重现问题的目的，我在类头中添加了多个相同的链接，并添加了"link-to-remove"类:

For the purposes of reproducing the issue I've added multiple identical links to the header with the 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">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" class="link-to-remove">

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

This is the function I'm using to remove the links:

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]);
        }
}

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

The function has the logic for removing all of the link elements, but it removes only a few every time. Only after pressing the button that triggers this function multiple times are all of the links removed. (In the example all links are removed when the bootstrap table styles disappear)

示例: https://www.w3schools.com/code/tryit.asp?filename=G36L0TRX06V3

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

What do I need to change in this function for it to remove all of the links the first time it's triggered?

推荐答案

问题是 getElementsByClassName 返回一个 live HTMLCollection -从迭代中删除元素时，集合将在您删除时更改.例如:

The problem is that getElementsByClassName returns a live HTMLCollection - if you remove an element from it during an iteration, the collection will change when you remove it. For example:

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 :

It's quite unintuitive. Either iterate backwards through the collection (eg, from length - 1, to length - 2, ... 0), to ensure every element gets iterated over, or use querySelectorAll instead, which returns a static NodeList:

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

querySelectorAll 的另一个好处是，较新的浏览器在NodeLists上支持 forEach ，因此您可以直接对其进行迭代，而不必使用难看的 for 循环:

Another benefit to querySelectorAll is that newer browsers support forEach on NodeLists, so you can iterate over them directly, rather than having to use an ugly for loop:

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

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

(as you can see, there's no need to select the head if you put the head in the query string passed to querySelectorAll - you may also remove() an element directly, rather than having to reference its parent and use removeChild)

这篇关于遍历具有相同类的元素并将其删除的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！