Its not that complicated right now! You’re only using 3 listeners for each of those buttons which is pretty good. You’re not going to get a whole lot better as far as reducing those
It sounds like you kind of know whats going on. And using mouseenter/mouseleave is kind of what you want, but it doesn’t work with delegation (adding one event to a parent) - which basically the whole point of their existence. So if you want to keep using one listener for them all, you’ll want to stick to mouseover/mouseout, but you’ll need to do a better job of recovering when a mouseout happens. This means in ever mouseover, you need to see if the target is in the
<li> not just being the
<li>, and if so, restore the class then too. This way when you move the mouse over to the delete button, and mouseout is called for the
<li>, the mouseover for the
<div> will see that its in the
<li> and run the over for li code.
You can use
closest() to find the parent shopping list
<li> if it exists.
const listItem = item.target.closest('#myShoppingList li');