Javascript Question
Removing list item in to-do list using pure Javascript
Let me start by saying that:
- I've already looked at a lot of documentation about resolving this
problem - 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
liremoveToDo.addEventListenerfunction removeToDoItemAny 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>
Recommended for you: Get network issues from WhatsUp Gold. Not end users.
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