title: addEventListener() not working on list of elements
body: <p>I have an array of paragraph elements. When each <code>&lt;p&gt;</code> is clicked on I want that element removed from the DOM. The code I've written only works when an element is specified by its id. I've tried using the <code>this</code> keyword, as well as looping through the elements without any success as the code below shows. </p>
  
  <p>What am I doing wrong here ? How can I overcome it ?</p>
  
  <pre><code>&lt;div class="section" id='section2'&gt;
  &lt;a name="section-two" href="#top"&gt;Section Two&lt;/a&gt;
  
          &lt;p id='tester'&gt;Text here &lt;span&gt;&lt;img src='images/remove.png' height='20px'/&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;Text here. &lt;span&gt;&lt;img src='images/remove.png' width='20px'/&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;Text here. &lt;span&gt;&lt;img src='images/remove.png' height='20px'/&gt;&lt;/span&gt;&lt;/p&gt;
          &lt;p&gt;Text here. &lt;span&gt;&lt;img src='images/remove.png' height='20px'/&gt;&lt;/span&gt;&lt;/p&gt;
      &lt;/div&gt;
  
  var section2 = document.getElementById('section2').getElementsByTagName('p');
  
  for(var i = 0; i &lt; section2.length; i++) {
  
    section2[i].addEventListener('click', function() {
    section2[i].parentNode.removeChild(section2[i]);
    }, false);
  }
  </code></pre>