Javascript - How to Remove DOM elements using click events and classes?
<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>