Javascript 在渲染代码之前从 DOM 中删除项目答案

【问题标题】：Javascript remove item from DOM before rendering codeJavascript 在渲染代码之前从 DOM 中删除项目
【发布时间】：2021-04-21 09:01:09
【问题描述】：

我正在尝试从我的 HTML 文档中删除一个元素，我可以使用 remove 方法来做到这一点，但是，当控制台使用 document.querySelectorAll() 记录 NodeList 的某些类上的元素时被删除了，它们仍然出现在 NodeList 中。

我需要从网页和 NodeList 中删除一个元素，就好像该元素最初在页面加载时不存在一样，以防止我的应用程序的其余部分认为它存在。

我原以为 remove 方法会涵盖这一点，但不幸的是它没有，我错过了什么以及解决方法是什么？

function removeElement (ident) {
  const elem = document.querySelector(ident)
  if (elem) {
    elem.remove()
  }
}

【问题讨论】：

我无法重现这个。 remove() definitely removes the element from the nodelist.
在从文档中删除元素后，你真的调用了 document.querySelectorAll() 吗？之所以问这个问题，是因为与大多数其他选择方法相反， document.querySelectorAll() 不会返回实时 NodeList - 而只是在调用选择器时匹配选择器的元素的快照。
我在调用 querySelectorAll 之前删除了元素
querySelector 返回 one 元素，因此只删除了一个元素。这就是为什么会有querySelectorAll。

【解决方案1】：

你必须通过它们的 id 名称来获取元素。

var elem = document.getElementById('myid');
elem.remove()

这里的'myid'是要删除的项目的id。

如果您想使用查询选择器删除它，请借助 elem 的父元素。

let elem = document.querySelector(ident);
elem.parentElement.removeChild(elem);

【讨论】：