0

I'm new to JavaScript and was working through this tutorial: https://www.youtube.com/watch?v=i37KVt_IcXw

In it, a delete button is added to a list list elements, and an event listener is used to remove list elements when clicked (~10:30). Items in list with delete button

When setting up the event that removes list elements, it seems to me like there are two options:

  1. Add an event listener to each button
  2. Add an event listener to the list, track what is clicked, set up a rule for check the item, then remove it if the delete button is pressed.

Option 1 is very explicit, which I like. However, there might be a ton of event listeners that have to be managed, which isn't fun.

Option 2 is very concise, but we now have to be careful managing our conditions for selecting elements. If there are a lot of things we can click, the conditional could get out of hand, which isn't fun to maintain.

In the tutorial, they went with option 2 but didn't say way. Any are there any rules to consider for when to use each option? Are there any 3rd cleaner options I'm missing?

cslotboom
  • 31
  • 3
  • You choose the best solution that fulfill having the minor amount of code, less dependencies with conditions, better performance, best readibility. in that case you may have the listener once in the list and inside the listener check the value of `event.target` containing the element that triggered the even. From there you can access the whole dom node related to the item interested. – Diego D Apr 16 '22 at 07:49
  • 1
    Does this answer your question? [What is DOM Event delegation?](https://stackoverflow.com/questions/1687296/what-is-dom-event-delegation) – traktor Apr 16 '22 at 07:53

1 Answers1

1

I go with option 1 for decades. Had no problem and I think it is more managable. Once you added event to delete you probably you won't need to remove it. Browser will handle memory and garbage collection job for you after a DOM element removed.

const deleteItem=function(event){
    if(!confirm('Are you sure ?')) return;
    //some business logic, requests etc...;
    //then remove DOM element
   this.parentElement.remove()
}
 
deleteBtn.addEventListener('click',deleteItem)

You can also use removeEventListener to remove the deleteItem event if ever needed.

Stan Mayan
  • 271
  • 4
  • 11