Is there a way to remove event listener if I know only element and event, but don't know a function?

Something like:

var foo = getElementById("foo");
foo.removeEventListener('click');

Is there a way to remove event listener if I know only element and event, but don't know a function?

Something like:

var foo = getElementById("foo");
foo.removeEventListener('click');

• javascript

• Sorry, its unclear what you're asking about... – Bhojendra Rauniyar Commented Dec 25, 2015 at 3:36
• It is possible using jQuery. However, AFAIK, there is no way to do this using pure JS. You will have use custom methods or wrap addEventListener and removeEventListener or use jQuery, which lets you easily do $("#foo").off('click');. – Yeldar Kurmangaliyev Commented Dec 25, 2015 at 3:41
• Is there only a single handler? – Dave Newton Commented Dec 25, 2015 at 3:43
• @john1121 I mean, use jQuery on and jquery off. If you attach this handler using pure JS, then there is no way to remove this listener without having a reference to a handler. – Yeldar Kurmangaliyev Commented Dec 25, 2015 at 3:44
• @YeldarKurmangaliyev Thank you very much, you bring the light to my actual problem. Yes, the problem is, that it was added via plain JS. How do you think, is googling something like "remove event listener from anonymous function" can help with it? – john c. j. Commented Dec 25, 2015 at 3:47

3 Answers 3

Pure JS methods

There is no way to detach an event listener without having a reference to its listener method.

Method definition requires listener to be specified.

JS with modifications

It is possible to use some sort of custom functions like this:

function addEventListenerAndRemember(element, type, listener, useCapture)
{
    if (!element.myEvents) element.myEvents = {};
    if (!element.myEvents[type]) element.myEvents[type] = [];

    element.myEvents[type].push(listener);

    element.addEventListener(type, listener, useCapture || false);
}

function removeAllEventListener(element, type)
{
    element.myEvents.forEach(function() {
        element.myEvents[type].forEach(function(listener) {
            element.removeEventListener(type, listener);
        });
        element.myEvents[type] = [];
    });
}

I am not sure that this code works - it is just an example for demonstrating the idea.
You can also wrap these methods to addEventListener and override the default behaviour. Just like:

Element.prototype.addEventListenerBase = Element.prototype.addEventListener;
Element.prototype.addEventListener = function(type, listener, useCapture) {
    // do the same
};

jQuery method

As for me, using jQuery library looks like the most clear solution here.

You will be able to attach an event this way:

$("#foo").on('click', function() {

});

and detach it in a simple way:

$("#foo").off('click');

I had the same problem and resolved it in different way.

$("#myelement").after($("#myelement")[0].outerHTML).remove()

You can check this code..hope it will help..

<a href="#" id="mydiv">click</a>
<a href="#" onclick="removeHandler()">remove</a>

<script>
document.getElementById("mydiv").addEventListener("click", myFunction);

function myFunction() {
    alert('hello');
}

function removeHandler() {
    document.getElementById("mydiv").removeEventListener("click", myFunction);
}
</script>

If you want to remove all event added to the element.

var el = document.getElementById('mydiv'),
elClone = el.cloneNode(true);

el.parentNode.replaceChild(elClone, el);