title: How to make Delete button to remove LI element in the code below?
body: <p>I am currently learning Javascript to understand it better. When you add an item to the list, I would like to have a delete button to remove it. </p>
  
  <p>It seems to me when I do <code>deleteButton.parentNode.parentNode.removeChild()</code>, it should remove the <code>li</code> element, but not sure why this is not working. </p>
  
  <p>JSFiddle here: <a href="http://jsfiddle.net/kboucheron/XVq3n/18/" rel="nofollow">http://jsfiddle.net/kboucheron/XVq3n/18/</a></p>
  
  <pre><code>addButton = document.getElementById('addButton');
  clearButton = document.getElementById('clearButton');
  deleteButton = document.getElementById('deleteButton');
  
  addButton.addEventListener("click", function(e) {
      var text = document.getElementById('listItem').value;
      var addItem = document.getElementById('output');
      var entry = document.createElement("li");
      text += ' &lt;button id="deleteButton"&gt;Delete&lt;/button&gt;';
      entry.innerHTML = text;    
      addItem.appendChild(entry);
  });
  
  clearButton.addEventListener("click", function(e) {
      var text = document.getElementById('listItem');
      var addItem = document.getElementById('output');
      addItem.innerHTML = '';
      text.value = '';
  });
  
  deleteButton.addEventListener("click", function(e) {
      deleteButton.parentNode.parentNode.removeChild();
  });
  </code></pre>