Delete specific child elements from DOM

Question

I have this code loading on my page:

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

How do I delete the 3 divs from the DOM? Everything I tried so far doesn't work. Here I some of my attempts:

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

`removeChild` takes a node, not a selector as its argument. `getElementsByClassName` and `querySelectorAll` return collections of elements that don't have any methods themselves - you need to iterate. — Bergi, Jul 12 '17 at 19:55
I think you need to removeChild on actual elements. So in your first example line, if you break it into 2 lines, first similar to "var zoomPup = document.getElementsByClassName('zoomPup'); and then 2nd line (nearly identical to your first) "document.getElementsByClassName('zoomPad').removeChild(zoomPup);" it should work. Note - not tested. Note2: since getElements returns a collection, you will need to handle it. If you always only have 1, you can grab the first, otherwise you may need to figure out other logic. — Aaron, Jul 12 '17 at 19:56

MildlySerious · Accepted Answer · 2017-07-13T00:24:53.023

Let's go through this one by one.

The querySelector() function returns a single node - the first node that matches your selector - that you can use .remove() on:

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

The functions getElementsByClassName() and querySelectorAll() both return a list of nodes. To remove all matched nodes, you have to iterate over them.

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

Now this would remove all elements with those classes from your document. To remove only child nodes from a specific parent, you would use these query functions from that parent node instead, after retrieving that first:

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

Note that removeChild() is not passed a selector, but a reference to the node itself. It also only works on direct descendants of the parent node. For nested nodes, you'd be best off to use just call childNode.remove() or use childNode.parentNode.removeChild(childNode) which is basically what the former is syntactic sugar for.

Important: childNode.remove() is not supported by Internet Explorer. So for cross compatibility the longer version or a polyfill would have to be used.

score 0 · Answer 2 · answered Jul 12 '17 at 20:05

First, fix this line bc you know that is not right.

<img src='someimg.jpg>

Second, you must understand that when you are selecting by class, remember that multiple elements can have the same class so you are basically dealing with an array of elements and must treat it as such.

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

Delete specific child elements from DOM

2 Answers2