drew.sparkman drew.sparkman - 3 years ago 171
Javascript Question

Removing list item in to-do list using pure Javascript

Let me start by saying that:


  1. I've already looked at a lot of documentation about resolving this
    problem

  2. I'm still very new to JavaScript.



The code may be annoying to read for some because of the step-by-step style of my commenting in the JavaScript file but I needed to do for myself in order to understand what I was doing.

The problem: the remove button doesn't remove the corresponding content, which is a
li
item. To me, that means the problem is in step 7
removeToDo.addEventListener
or in step 8
function removeToDoItem
, but I could be wrong.

Any help would be great.



//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 <ul> 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 <li> in the <ul>
toDos.forEach(function(toDo) {

//5.3 creates new <li>
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()
};

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>To-Do App</title>
</head>
<body>
<h1>To-Do App</h1>

<form id="addToDoForm">
<label for="newToDoText">New To-Do:</label>
<input type="text" id="newToDoText">
<button type="submit">Add To-Do!</button>
</form>

<ul id="toDoList">
</ul>

<script src="app.js"></script>
</body>
</html>




Answer Source

You are binding click event listener to removeToDo whereas removeToDo is is present only inside renderUI function. So your seventh step is wrong. you need to add Event listener inside createUI itself. Replace your script with below 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(index) {
    console.log(toDos);
    toDos.splice(index, 1);
    console.log(toDos);
    renderTheUI(toDos);
  }

  //5) FIFTH STEP: build the function that will render the UI
  function renderTheUI(toDos) {

    //5.1) Accesses the <ul> 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 <li> in the <ul>
    toDos.forEach(function(toDo, index) {
            //5.3 creates new <li>
      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');
      removeToDo.setAttribute('class', 'removeButton');
      removeToDo.setAttribute('data-index', index);

      //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);

      removeToDo.addEventListener('click', function(event) {
        removeToDoItem(index);
      });
    });
  }

  //3.1) Event Listener - catches 'submit', prevents page reload,
  // and invokes the function createNewToDo
  addToDoForm.addEventListener('submit', function(event) {
    event.preventDefault();
    createNewToDo();
  });

  //4) FOURTH STEP: add the call that controls UI based on state
  renderTheUI(toDos);
}
onReady();
Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download