Project Challenge 3: Deleting a Task from the To-Do List

Problem statement

In this challenge, the task is as follows:

• When the user clicks on one of the delete button elements nested within a task, remove the corresponding parent task element from the webpage.

This task is deceptively simple. The delete button element with the id of delete is dynamically generated upon the addition of a new task. The click event handler $("#delete").click() will not work because jQuery only binds the event handlers to static elements that exist at the time of binding.

So, how do we add event handlers to dynamically generated elements? This is where the jQuery on() method comes into play. Using the on() method, we can assign the click event handler to the ancestor element present at the time of event binding. In the second argument of on(), we specify the selector for the descendant elements of interest. The click event handler function is only executed if the specific descendant of that ancestor element is clicked.

We can bind a click event handler to a dynamically generated delete button element like this:

$("div").on("click", "#delete", function(){
        // code for event handler function
    });

This event handler function is only triggered when a descendant of a div element with id of delete is clicked.