title: Javascript - How to Remove DOM elements using click events and classes?
body: <p>I am having some difficulty using <code>parentNode.removeChild()</code>. I have a list of 'items' in an un-ordered list, each have there own delete button. I am trying bind a click event to each individual button that will delete it's respective parent 'item'. </p>
  
  <p><strong>My code so far:</strong></p>
  
  <pre><code>&lt;ul class="list"&gt;
    &lt;h2&gt;This is a list&lt;/h2&gt;
    &lt;li class="item"&gt;
      &lt;h3&gt;Some Item&lt;/h3&gt;
      &lt;button class="delete"&gt;Delete&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="item"&gt;
      &lt;h3&gt;Some Item&lt;/h3&gt;
      &lt;button class="delete"&gt;Delete&lt;/div&gt;
    &lt;/li&gt;
    &lt;li class="item"&gt;
      &lt;h3&gt;Some Item&lt;/h3&gt;
      &lt;button class="delete"&gt;Delete&lt;/div&gt;
    &lt;/li&gt; 
  &lt;/ul&gt;
  
  var childElements = document.getElementsByClassName('item');
  var buttonElement = document.getElementsByClassName('delete');
  
  function deleteItem(buttonsClass, childClass) {
    for (var i=0;i&lt;buttonsClass.length;i++) {
      var child = childClass[i];
      buttonsClass[i].addEventListener('click', function(child) {
         childClass[i].parentNode.removeChild(childClass[i]);
      }, false);
    }    
  }
  
  deleteItem(buttonElement, childElements);
  </code></pre>
  
  <p>I know there is an easier way to do this with jQuery but i really want to solve this with plain javascript. Thank you for any and all help.</p>