title: Dynamic elements onclick functions
body: <p>I was wondering what's the shortest &amp; fastest way to add an event listener for dynamically created HTML elements on this following structure, only pure JS allowed. 
  This is the HTML structure :</p>
  
  <pre><code>&lt;div class="container"&gt;
    &lt;h1&gt; To Do List &lt;/h1&gt;
    &lt;input type="text" id="userInput" /&gt;
    &lt;ul id="todosHolder"&gt;
      &lt;li&gt;&lt;span class="delete"&gt;X&lt;/span&gt; Foo &lt;/li&gt;
      &lt;li&gt;&lt;span class="delete"&gt;X&lt;/span&gt; Whatever &lt;/li&gt;
      &lt;li&gt;&lt;span class="delete"&gt;X&lt;/span&gt; Yeah sure &lt;/li&gt;
      &lt;li&gt;&lt;span class="delete"&gt;X&lt;/span&gt; Bar &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>this is the JS structure</p>
  
  <pre><code>// Check &amp;&amp; uncheck todos by clicking
  
  let li = document.querySelectorAll('li');
  
  for( let i = 0; i &lt; li.length; i++ ) {
    li[i].addEventListener('click', function() {
      this.classList.toggle('completed');
    });
  }
  
  //Click "X" to delete a todo
  let x = document.querySelectorAll('.delete');
  for( let i = 0; i &lt; x.length; i++ ) {
    x[i].addEventListener('click', function(){
        this.parentElement.remove();
    });
  }
  
  // listen for 'enter' keypress
  let inputListener = document.getElementById('userInput');
  inputListener.addEventListener('keypress',function(event) {
      if(event.which === 13) {
          var inputText = this.value;
          this.value = "";
          //create new li and add it to ul
          var ul = document.getElementById('todosHolder');
          ul.insertAdjacentHTML('beforeend','&lt;li&gt;&lt;span class="delete"&gt;X&lt;/span&gt; ' + inputText + '&lt;/li&gt;');
      }
  });
  </code></pre>