title: Best way to add delete button in to do list
body: <p>I'm creating a to do list with vanilla JS. I ideally want to keep my adding, deleting functions separate to keep everything tidy.</p>
  
  <p>My issue is if I create a delete button when I add a to do I don't know how to reference the delete button.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/ped1j6kf/11/" rel="nofollow noreferrer">https://jsfiddle.net/ped1j6kf/11/</a></p>
  
  <p>Any ideas?</p>
  
  <p>Thanks</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;body&gt;
      &lt;!-- Main --&gt;
      &lt;div id="main"&gt;&lt;/div&gt;
      &lt;!-- Add --&gt;
      &lt;input id="to-do-value" type="text" placeholder="Enter to do"&gt;
      &lt;button id="add"&gt;Add&lt;/button&gt;
  &lt;script type="text/javascript" src="main.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>// To do
  
  var toDo = {
      cacheDom: function() {
          this.toDo = ['test'];
          this.main = document.getElementById('main');
          this.add = document.getElementById('add');
          this.toDoValue = document.getElementById('to-do-value');
      },
      init: function() {
          this.cacheDom();
          this.bindEvents();
          this.displayToDos();
      },
      bindEvents() {
          this.add.addEventListener("click", this.addToDo.bind(this));
      },
      displayToDos: function() {
          var html = '&lt;ul&gt;';
          for(i=0; i &lt; this.toDo.length; i++) {
              html += '&lt;li&gt;' + this.toDo[i] + '&lt;/li&gt;' + '&lt;button&gt;delete&lt;/button&gt;';
          }
          html += '&lt;/ul&gt;';
  
          this.main.innerHTML = html;
      },
      addToDo(){
          var toDoValue = this.toDoValue.value;
          this.toDo.push(toDoValue);
          this.displayToDos();
      },
      deleteToDo() {
          console.log("make this delete button work");
      }
  }
  
  toDo.init();
  </code></pre>