title: Delete specific child elements from DOM
body: <p>I have this code loading on my page:</p>
  
  <pre><code>&lt;div class='zoomPad'&gt;
    &lt;img src='someimg.jpg'&gt;
    &lt;div class='zoomPup'&gt;&lt;/div&gt;
    &lt;div class='zoomWindow'&gt;&lt;/div&gt;
    &lt;div class='zoomPreload'&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>How do I delete the 3 divs from the DOM? Everything I tried so far doesn't work. Here I some of my attempts:</p>
  
  <pre><code>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()
  </code></pre>