Introduction
The goal of this task is to add a Delete button to a clickable list item. The trick for me was that the list item itself was a clickable element. When one of the list items is selected, the details of that list item are displayed on another section of the page. The Delete button's job is simply to delete the list item associated with it. The issue is that whenever the Delete button is clicked, it will delete the list item as intended, however because it is a child node of the list item, the list item's click event is also triggered.
The Code
Getting into the code, the first section is a function that builds the list of films.
The list is made using a function that utilizes a for...in statement to iterate through the film list object. It creates a new list item and populates that list item with the appropriate info for that individual film. It also creates a button with a click event that calls another function which carries out the deleting of the list item. The button is then appended as a child of the list item and the list item appended to the unordered list.
Now that we have a complete list of the films, we add an event listener to the film list. The event listener calls a function that will display the details of the selected film.
Building the Delete button
The next step is to make the Delete button functionable. The button already returns an event response with the onclick attribute, which is set to call the deleteFilm function.
The deleteFilm function takes the id of the selected film and passes it to a fetch DELETE request. When the fetch DELETE request returns, it calls the getFilms function and repopulates the film list to reflect the change. The issue is that as the code is written now, when the Delete button is clicked the associated film is deleted as desired, but then we get an error.
This error happens because when the Delete button is clicked it functions as desired, but the Delete button is a child of the list item it's associated with. This means that when the Delete button is clicked, not only is it's event handler triggered, the event handler for the list item is also triggered. This calls the function that populates the details of the film. The error happens because it is trying to display the details of the film that has been deleted and the info no longer exists.
Now I'm sure this issue could be handled with some conditional statements that look at each of the events that are triggered and use some attributes to only allow the desired event to fire. Before doing all that, I wanted to see if there was a simpler solution, so I took to Google to see. On the W3 schools website I found the solution I was looking for - the stopPropagation() method. Here is the definition and usage from the W3 schools website:
This method is exactly what we are looking for and simply adding this one line to the code resolves the error we are getting. It allows the delete function to run, but then blocks the event of the parent node (the list item) from being triggered. Here is the delete function with stopPropagation() method added.
We now have a functioning list in which we can select the film that we wish to see the details for, as well as delete films we no longer want on the list.
Top comments (0)