javascript - 从 querySelectorAll 更改为 getElementsByClassName 后，按钮未按预期删除项目

Question

在我开始使用let getListObjects = document.getElementsByClassName("todoListItems")而不是选择列表项之前，我的小应用程序正在运行let getListObjects = document.querySelectorAll('li')

这样做的原因是因为我在页面的单独部分的应用程序中添加了另一个 UL 部分，并希望这些列表项做其他事情。

长话短说，我只能删除主应用程序中的 2/3 列表项，除非我先删除底部的 li 项，然后再删除所有项。这对我来说是 0 意义。下面是代码。

function applyButton() { //onload for dummy data or data from db
  let getListObjects = document.getElementsByClassName("todoListItems")

  for (let i = 0; i < getListObjects.length; i++) {

    let node2 = document.createElement('a')
    let iconNode = document.createElement('i')
    let att = document.createAttribute("href");
    att.value = "#"
    node2.setAttributeNode(att)
    node2.appendChild(iconNode)
    iconNode.classList.add('far')
    iconNode.classList.add('fa-trash-alt')
    iconNode.classList.add('trashCan')


    getListObjects[i].appendChild(node2)
    //addEventToButton2(getListObjects[i]) no need for it, keeping it here as a reminder of what happens with scoping

    node2.addEventListener('click', function() {
      node2.parentNode.parentNode.removeChild(getListObjects[i])
    });

  }

}

<div>
  <ul id='list-body'>
    <li id='enterItem'><input type='text' placeholder="Enter List Item..." id='newNote' class='inputEnterItem'></li>
    <li class='todoListItems'><span>Walk Dog Hit Gym and Lift Bro Hit Gym and Lift Bro  Hit Gym and Lift Bro Hit Gym and Lift Bro</span></li>
    <li class='todoListItems'><span>Hit Gym and Lift Bro</span></li>
    <li class='todoListItems'><span>Stretch</span></li>
  </ul>
</div>

TLDR：在我使用 querySelectorAll 选择这些 LI 项目之前，它没有任何错误。现在我通过 className 选择它们，如果我先删除底部的 LI，它只会让我删除 2/3 的 li 项目或所有 3 个项目

标签： javascripthtmlcss

Answer 1

getElementsByClassName返回一个实时集合。如果将集合保存在变量中，然后从 DOM 中删除集合中的一个元素，或者将具有相同类名的另一个元素添加到 DOM 中，则集合将发生变化：

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

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

这是非常不直观的，因为如果您正在做任何可以更改集合的事情，它可能会自行变异。querySelectorAll返回一个静态的NodeList，它不是活动的 - 例如，索引处的元素3将在索引 3 处永久删除，即使从 DOM 中删除，除非您明确进入并将其从 NodeList 中删除。

简单的解决方案：querySelectorAll改用。

要使用 选择特定类名的所有元素，请在类名前面querySelectorAll放置：更改.

document.getElementsByClassName('foo');

至

document.querySelectorAll('.foo');

另一种可能性是getListObjects[i]在循环的每次迭代中保存对当前的引用：

let getListObjects = document.getElementsByClassName("todoListItems")
for(let i = 0; i< getListObjects.length; i++){
  const listObject = getListObjects[i];
  // now that we have a reference to the singular element,
  // don't ever refer to the collection again:

  let node2 = document.createElement('a')
  // ...


  listObject.appendChild(node2)

  node2.addEventListener('click', function(){
    node2.parentNode.parentNode.removeChild(listObject)  
  });
}

如果需要，您还可以listObject.remove()稍微清理一下点击侦听器：

node2.addEventListener('click', function(){
  listObject.remove();
});