How to remove all event listeners from certain categories that are mentioned in Chrome Console in Event Listeners

Question

How do I remove all event listeners that are connected to the element that I can see in the Chrome Console in Event Listeners?

jQuery can be used if it will make it easier.

For example:

This is tab in Chrome console.

As you can see element is <a> but it as also some listeners from <div> , there is remove button next to each listener.

I would like to replicate something like this Remove button that deletes all listeners from mouseleave and mouseenter category.

I have tried to use jQuery's .unbind('mouseleave mouseover') but it doesn't remove them.

Is there any way how can I access all listeners from one category and remove them?

Answer 1

You can replace it with a clone:

const el = document.querySelector(...)
el.parentNode.replaceChild(el.cloneNode(true), el)

Then you can reattach the listened you still need if any.