title: Removing list item in to-do list using pure JavaScript
body: <p>Let me start by saying that:</p>
  
  <ol>
  <li>I've already looked at a lot of documentation about resolving this
  problem</li>
  <li>I'm still very new to JavaScript.</li>
  </ol>
  
  <p>The problem: the remove button doesn't remove the corresponding content, which is a <code>li</code> item. To me, that means the problem is in step 7 <code>removeToDo.addEventListener</code> or in step 8 <code>function removeToDoItem</code>, but I could be wrong.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>//2) SECOND STEP: build the function that will control everything
  function onReady() {
  
    //2.1) creates and houses the current state of to-do list
    var toDos = [];
  
    //3) THIRD STEP: Event Listener - this accesses the HTML form element
    var addToDoForm = document.getElementById('addToDoForm');
  
    //2.2) build function that creates/adds list items
    function createNewToDo() {
  
      //2.3) accesses the text input from the form
      var newToDoText = document.getElementById('newToDoText');
  
      //2.4) adds new item to the toDos array
      toDos.push({
        title: newToDoText.value,
        complete: false
      });
  
      //2.5) clears the text in the form input field so user doesn't need to
      newToDoText.value='';
  
      renderTheUI(toDos);
    }
  
    //8) EIGHT STEP: build function that deletes list item
    function removeToDoItem() {
      newLi.toDoList.removeChild(newLi);
      renderTheUI(toDos);
    }
  
    //5) FIFTH STEP: build the function that will render the UI
    function renderTheUI(toDos) {
  
      //5.1) Accesses the &lt;ul&gt; in the HTML
      var toDoList = document.getElementById('toDoList');
  
      //5.9 sets each newLi to an empty string
      toDoList.innerHTML = '';
  
      //5.2) Use forEach() array method to render each to-do as an &lt;li&gt; in the &lt;ul&gt;
      toDos.forEach(function(toDo) {
  
        //5.3 creates new &lt;li&gt;
        var newLi = document.createElement('li');
        newLi.setAttribute('id', 'myLi');
  
        //5.4 creates new checkbox
        var checkbox = document.createElement('input');
  
        //6) SIXTH STEP: create remove button and set its attributes
        var removeToDo = document.createElement('input');
        removeToDo.setAttribute('type', 'button');
        removeToDo.setAttribute('value', 'remove');
        removeToDo.setAttribute('id', 'removeButton');
  
        //5.5 set var checkbox as a type checkbox
        checkbox.type = 'checkbox';
  
        //5.6 assigns to-do item to newLi in the HTML
        newLi.innerHTML = toDo.title;
  
        //5.7 appends newLi to the to-do list
        toDoList.appendChild(newLi);
  
        //5.8 appends a checkbox to each newLi
        newLi.appendChild(checkbox);
  
        //6.1 append the remove button to each newLi
        newLi.appendChild(removeToDo);
      });
    }
  
    //3.1) Event Listener - catches 'submit', prevents page reload,
    // and invokes the function createNewToDo
    addToDoForm.addEventListener('submit', function(event) {
      event.preventDefault();
      createNewToDo();
    });
  
    //7) SEVENTH STEP: assign remove button event and invoke removeToDoItem()
    removeToDo.addEventListener('click', function(event) {
      removeToDoItem();
    });
  
    //4) FOURTH STEP: add the call that controls UI based on state
    renderTheUI(toDos);
  }
  //1) FIRST STEP: invokes the function onReady() when page loads
  window.onload = function() {
    onReady()
  };</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;title&gt;To-Do App&lt;/title&gt;
    &lt;/head&gt;
    &lt;body&gt;
      &lt;h1&gt;To-Do App&lt;/h1&gt;
  
      &lt;form id="addToDoForm"&gt;
        &lt;label for="newToDoText"&gt;New To-Do:&lt;/label&gt;
        &lt;input type="text" id="newToDoText"&gt;
        &lt;button type="submit"&gt;Add To-Do!&lt;/button&gt;
      &lt;/form&gt;
  
      &lt;ul id="toDoList"&gt;
      &lt;/ul&gt;
  
      &lt;script src="app.js"&gt;&lt;/script&gt;
    &lt;/body&gt;
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>