Javascript 从DOM中删除特定的子元素

我的页面上加载了以下代码：

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

---

让我们一个接一个地看一遍

该函数返回单个节点（与选择器匹配的第一个节点），您可以在以下节点上使用该节点：

函数和都返回一个节点列表。要删除所有匹配的节点，必须对其进行迭代

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

let nodes=document.queryselectoral（'.zoomPup、.zoomWindow、.zoompload'））
for（设i=0，j=nodes.length；i

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

// 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)
}

//仅查询第一个zoomPad节点
让parentNode=document.querySelector（'.zoomPad'）
//查询列表及其子项
让childNodes=parentNode.querySelectorAll（'.ZoomUp、.zoomWindow、.ZoomReload'））
for（设i=0，j=childNodes.length；i

请注意，传递的不是选择器，而是对节点本身的引用。它也仅适用于父节点的直接后代。对于嵌套节点，最好使用call

childNode.remove（）

或使用

childNode.parentNode.removeChild（childNode）

，这基本上就是前者的语法意义

---

重要提示：

Internet Explorer不支持childNode.remove（）

。因此，为了实现交叉兼容性，必须使用较长的版本或polyfill。

首先，修复这一行，因为您知道这是不对的

<img src='someimg.jpg>    

---

removeChild

将节点而不是选择器作为其参数

getElementsByClassName

和

querySelectorAll

返回本身没有任何方法的元素集合-您需要迭代。我认为您需要删除实际元素上的child。因此，在第一个示例行中，如果将其分成两行，第一行类似于“var zoomPup=document.getElementsByClassName（'zoomPup'）；第二行（几乎与第一行相同）”document.getElementsByClassName（'zoomPad'）。removeChild（zoomPup））；“它应该可以工作。注意-未测试。注意2：由于getElements返回一个集合，因此您需要处理它。如果您总是只有1个集合，则可以获取第一个集合，否则您可能需要找出其他逻辑。”。

// 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)
}

<img src='someimg.jpg>    

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