Same approach as the mouseenter and mouseleave handlers. Note that .remove() discards a node and all it children. A few differences:

• This handler needs to be put on the button (the div around the svg tag), not on the whole <li>
• Thus, e.currentTarget will refer to that element
• You still have a reference to the whole <li>, but if you want to work from the button, .parentElement will be helpful.

This AJAX call isn't any different than the others, except that it is inside a handler that you are hooking to a new element created from data. You will need to know which ID you are trying to delete. Fortunately, this is where JavaScript scoping starts to shine. In your code where you are cloning and modifying the template, you hook the delete handler. At that point, the quote data you retrieved is available (that's how you are putting it in the copy). That means that the id is also available.

In the example below, I am hooking a click event onto an element element. I have a variable id in scope, so I can use it in the handler function. What is notable here is that handler function is not called until later, when the click event happens. This is possible because JavaScript maintains a reference to the variable (not a copy!). This also means that if I was to change id after creating the handler, the new value is what would be used.

// id is available at the time I'm adding the event handler
const id = 17;
...

// adding the event handler
element.addEventListener('click', async e => {
  // id is used here when the click happens
  const response = await fetch(`/some/url/${id}`);
  ...
});
// if I changed id here, the new value would be used in the handler
// id = 22;