Hi, and welcome to our new lesson on Deleting todo items in JavaScript. This is an important capability to understand as it's a common functionality in many applications. By the end of this lesson, you will learn how to remove an item from the HTML page.
Picture this: you've finished your math homework and want to remove it from your todo list. Or perhaps you've just finished washing your car and want to mark it off your list. This is what we aim to achieve in this lesson — providing users the ability to delete completed tasks from their todo list.
Before we start, let's look at a basic example of how to remove an HTML element. Imagine a user clicks on a task, and we need to remove that task's HTML representation from the webpage. To achieve this, we will use JavaScript!
In JavaScript, there are two primary methods for deleting an HTML element: removeChild() and remove(). Keep in mind that we call these methods because they perform specific tasks or operations. It's a little bit like a machine in a factory — we provide the machine with resources, it does its job, and produces an output.
Here's our HTML structure:
HTML, XML1<ul id="todoList"> 2 <li id="item1">Wash the car</li> 3 <li id="item2">Do math homework</li> 4</ul>
Suppose we want to remove the li element with id item1. First, we need to get a reference to the parent node (the ul element with id todoList). Then, we'll obtain a reference to the child node (the li element with id item1). Finally, we can use the removeChild() method to remove the child node from the parent node:
JavaScript1var parentNode = document.getElementById("todoList"); 2var childNode = document.getElementById("item1"); 3parentNode.removeChild(childNode); // removes the child node from the parent node
Alternatively, you can directly call the remove() method on the element you wish to delete:
JavaScript1childNode.remove(); // removes the node directly
Both methods will modify the HTML structure to:
HTML, XML1<ul id="todoList"> 2 <li id="item2">Do math homework</li> 3</ul>
It is is important to note that when a parent node is deleted from the DOM, all of its child nodes are also automatically removed along with it. No matter the approach, the li element with id item1 is successfully removed!
Alright, let's put what we have learned into practice and code the delete function into our todo list application. We need to follow these steps:
- Add an input field and an "Add" button to the HTML structure for adding new todo list items.
- When the "Add" button is clicked, add a new
lielement to theullist with the todo item text. - Add a
clickevent listener to the newlielement that deletes the corresponding HTML element.
Here's how we can do it:
HTML, XML1<!DOCTYPE html> 2<html> 3 <body> 4 <input type="text" id="new-todo" placeholder="Enter new todo"> 5 <button id="add-btn">Add</button> 6 <ul id="todo-list"></ul> 7 8 <script> 9 document.getElementById('add-btn').addEventListener('click', function() { 10 const newTodo = document.getElementById('new-todo').value; 11 if (newTodo.trim() === '') return; 12 13 const li = document.createElement('li'); 14 li.textContent = newTodo; 15 16 li.addEventListener('click', function() { 17 document.getElementById('todo-list').removeChild(li); 18 }); 19 20 document.getElementById('todo-list').appendChild(li); 21 document.getElementById('new-todo').value = ''; 22 }); 23 </script> 24 </body> 25</html>
As you can see, we're adding an input field to enter new todos and an "Add" button to add them to the list. When an li element is clicked, we remove it from the todo-list ul element.
In the code above, we used anonymous functions within our event listeners. An anonymous function is a function without a name. They are often used in situations where you need a quick, throwaway function, such as event listeners.
For example, in the addEventListener method for the "Add" button, we used an anonymous function:
JavaScript1document.getElementById('add-btn').addEventListener('click', function() { 2 const newTodo = document.getElementById('new-todo').value; 3 if (newTodo.trim() === '') return; 4 5 const li = document.createElement('li'); 6 li.textContent = newTodo; 7 8 li.addEventListener('click', function() { 9 document.getElementById('todo-list').removeChild(li); 10 }); 11 12 document.getElementById('todo-list').appendChild(li); 13 document.getElementById('new-todo').value = ''; 14});
Here, the functions inside the addEventListener methods don’t have a name; they are defined inline and used immediately. This makes the code concise and directly ties the function to the event handling logic. It is ideal for scenarios like event listeners where you typically don’t need to reuse the function elsewhere.
When using anonymous functions, you cannot invoke them elsewhere in your code because they don’t have a name. This is beneficial for keeping event handling logic encapsulated and avoids polluting the global namespace.
Well done on reaching the end of this lesson on deleting todo items in JavaScript! We started by learning how to remove HTML elements on a webpage through the removeChild() method. Finally, we coded a delete function in our todo list application that removes an HTML element when clicked.
If you're able to delete specific items from your todo list, then congrats, you have successfully achieved the goal of this lesson! As with any new skill, practice is key to mastery. In the next exercises, you'll get plenty of opportunities to practice deleting different todo items from a list. This will not only help you get a more solid understanding of the deleting mechanism in JavaScript but will also give you more hands-on experience with JavaScript as a whole. So roll up your sleeves, work those coding muscles, and let's get ready to dive into some practice!