Question

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

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

长话短说，除非我先删除底部的li项目，然后再删除所有这些项目，否则我只能在主应用程序中删除2/3个列表项目。这对我来说是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选择了它们，但是我只删除了2/3个li项，或者如果我先删除底部的LI则删除了3个项

Answer 1

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

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

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

这是很不直观的，因为如果您执行任何可以更改集合的操作，它就会自我变异。 querySelectorAll返回一个 static 节点列表，该列表不是活动的-例如，索引3上的元素将永久从索引3处删除，即使从DOM中删除也是如此，除非您可以明确地将其从NodeList中删除。

简便的解决方案：改为使用querySelectorAll。

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

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

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

1 个答案: