Adding a button inside a clickable element
Tags: javascript, beginners, programming, tutorial
Published: 2022-08-20 14:37:57

<h2>Introduction</h2>
<p>The goal of this task is to add a <code>Delete</code> 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 <code>Delete</code> button's job is simply to delete the list item associated with it. The issue is that whenever the <code>Delete</code> 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. 
</p>


<h2>The Code</h2>
Getting into the code, the first section is a function that builds the list of films.


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2md9owqscv9cf74y3rd3.jpg)

<p>The list is made using a function that utilizes a <code>for...in</code> 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.<p> 

<p>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.</p>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/qnf9r706ceq95c0hbq4t.jpg)

<br>
<h2>Building the <code>Delete</code> button</h2>
<p>The next step is to make the <code>Delete</code> button functionable. The button already returns an event response with the <code>onclick</code> attribute, which is set to call the <code>deleteFilm</code> function.</p>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/yl4imzadxhg7xbwwus53.jpg)

<p>The <code>deleteFilm</code> function takes the <code>id</code> of the selected film and passes it to a <code>fetch DELETE</code> request. When the <code>fetch DELETE</code> request returns, it calls the <code>getFilms</code> function and repopulates the film list to reflect the change. The issue is that as the code is written now, when the <code>Delete</code> button is clicked the associated film is deleted as desired, but then we get an error.</p>




<p>This error happens because when the <code>Delete</code> button is clicked it functions as desired, but the <code>Delete</code> button is a child of the list item it's associated with. This means that when the <code>Delete</code> 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.</p>

<p>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 <a href="https://www.w3schools.com/jsref/event_stoppropagation.asp">W3 schools</a> website I found the solution I was looking for - the <code>stopPropagation()</code> method. Here is the definition and usage from the W3 schools website:</p>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/zt49uwrn998kb3k5utfc.jpg)

<p>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 <code>stopPropagation()</code> method added.</p>


![Image description](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pq153bluuj752dsy5ahc.jpg)

<p>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.</p>
<br><br>
<a href="https://www.w3schools.com/jsref/event_stoppropagation.asp">https://www.w3schools.com/jsref/event_stoppropagation.asp</a>