title: Adding click event listener to elements with the same class
body: <p>I have a list view for delete id. I'd like to add a listener to all elements with a particular class and do a confirm alert.</p>
  
  <p>My problem is that this seems to only add the listener to the first element with the class it finds. I tried to use <code>querySelectorAll</code> but it didn't work.  </p>
  
  <pre class="lang-js prettyprint-override"><code>var deleteLink = document.querySelector('.delete');
  
  deleteLink.addEventListener('click', function(event) {
      event.preventDefault();
  
      var choice = confirm("sure u want to delete?");
      if (choice) {
          return true;
      }
  });
  </code></pre>
  
  <p>List:</p>
  
  <pre class="lang-php prettyprint-override"><code>&lt;?php 
      while($obj=$result-&gt;fetch_object())
      {
          echo '&lt;li&gt;&lt;a class="delete" href="removeTruck.php?tid='.$obj-&gt;id.'"&gt;'.$obj-&gt;id.'&lt;/a&gt;'
              . '&lt;a href="#" class="delete"&gt;&lt;/a&gt;
                        &lt;/li&gt;'."\n";
      }
      /* free result set */
      $result-&gt;close();       
      $mysqli-&gt;close();
  ?&gt;
  </code></pre>