Question

我在我的页面上加载了此代码：

<div class='zoomPad'>
  <img src='someimg.jpg'>
  <div class='zoomPup'></div>
  <div class='zoomWindow'></div>
  <div class='zoomPreload'></div>
</div>

如何从DOM中删除3个div？到目前为止我尝试过的所有东西都不起作用。在这里，我尝试了一些尝试：

document.getElementsByClassName('zoomPad').removeChild('.zoomPup, .zoomWindow, .zoomPreload')
document.getElementsByClassName('.zoomPup, .zoomWindow, .zoomPreload').remove()

document.querySelectorAll('.zoomPad').removeChild('.zoomPup, .zoomWindow, .zoomPreload')
document.querySelectorAll('.zoomPup, .zoomWindow, .zoomPreload').remove()

document.querySelector('.zoomPad').removeChild('.zoomPup, .zoomWindow, .zoomPreload')
document.querySelector('.zoomPup, .zoomWindow, .zoomPreload').remove()

Answer 1

让我们逐一介绍。

querySelector()函数返回一个节点 - 与您的选择器匹配的第一个节点 - 您可以使用.remove()：

document.querySelector('.zoomPup').remove()
document.querySelector('.zoomWindow').remove()
document.querySelector('.zoomPreload').remove()

函数getElementsByClassName()和querySelectorAll()都返回节点列表。要删除所有匹配的节点，您必须迭代它们。

let nodes = document.querySelectorAll('.zoomPup, .zoomWindow, .zoomPreload')
for(let i = 0, j = nodes.length; i < j; i++) {
    nodes[i].remove()
}

现在，这将删除文档中包含这些类的所有元素。要从特定父节点中仅删除子节点，您可以在首先检索该父节点后使用这些查询函数：

// Query for only the first zoomPad node
let parentNode = document.querySelector('.zoomPad')
// Query for a list its children
let childNodes= parentNode.querySelectorAll('.zoomPup, .zoomWindow, .zoomPreload')

for(let i = 0, j = childNodes.length; i < j; i++) {
    let childNode = childNodes[i]
    parentNode.removeChild(childNode)
}

请注意，removeChild()不是传递给选择器，而是传递给节点本身。它也只适用于父节点的直接后代。对于嵌套节点，最好只使用调用childNode.remove()或使用childNode.parentNode.removeChild(childNode)，这基本上是前者的语法糖。

重要提示：Internet Explorer不支持 childNode.remove()。因此，为了交叉兼容，必须使用更长版本或polyfill。

Answer 2

首先，修复此行，你知道这是不对的。

<img src='someimg.jpg>

其次，您必须明白，当您按类选择时，请记住多个元素可以具有相同的类，因此您基本上处理的是元素数组，并且必须将其视为这样。

var x = document.getElementsByClassName("zoomPup");
x[0].parentNode.removeChild(x[0]);

从DOM中删除特定的子元素

2 个答案: