JavaScript

How to remove an event Listener in JavaScript? | Explained with examples

JavaScript is highly used in web page development. Being a dynamic language, it’s easy to change the behaviors of the page on Runtime. It is normally easier to use in the client-side environment as we are able to make changes very quickly. Today we are going to talk about another JavaScript operation which is how we can easily remove the event listener from an event.

Removing the event listener using JavaScript

Removing the event listener from a specific HTML element can be so important in some cases as you don’t want the event to get triggered multiple times without any reason. JavaScript can be very helpful to achieve this functionality so let’s see how we can easily get this job done.

RemoveEventListener() method

RemoveEventListener() is a built-in function in JavaScript that can be used to remove event listeners from HTML elements.Assume you have the following event listener attached to a <button> element:

    <body style = "text-align:center;">
        <center>
            <button id="click">Click me</button>
        </center>

        <script>

        let btn = document.getElementById('click');

        const clicked = (e) => {
            alert('this button was clicked');
        }

        btn.addEventListener('click', clicked)
        </script>
    </body

Now suppose you want to remove the click event from the button, you’ll need a reference to both the element containing the listener and the callback function reference to remove an event listener effectively. To remove the “click” event, the code will go like this:

btn.removeEventListener('click', clicked)

However, it’s not a good idea to pass an event listener an unnamed callback function like this:

btn.addEventListener('click', (e)=>{
            alert('this button was clicked');
        })

You won’t be able to remove the event listener without the callback function name, as seen in the example above.

Removing the event listener after clicking the button

Sometimes you may don’t want the button to be clicked twice as if its going to be clicked, the event will trigger and cause the processing issues under the event. So to handle this issue instantly we need to attach a removeEventListener() inside the addEvenetListener() method. Let’s see how we can achieve this functionality in the code below:

<body style = "text-align:center;">
        <center>
            <button id="click">Click me</button>
        </center>

        <script>

        let btn = document.getElementById('click');

        const clicked = (e) => {
            alert('this button was clicked');
            btn.disabled=true; // this line is disabling the button
            btn.removeEventListener('click', clicked) //  this line removes the event listener right after clicking the button
        }

        btn.addEventListener('click', clicked)

        </script>
    </body>

Output:

So with the above example, once the button was clicked, it’s going to trigger the event attached to it and remove that event after disabling the button to avoid multiple clicks at the same time from the user.

That’s how you get rid of JavaScript event listeners from HTML elements. For removing an event listener from an HTML element, you need to take care of the two things, you have to define the type of the event and the second thing is that you need to provide the reference function that is attached to the event listener.

Conclusion

The removeEventListener() method is used whenever you are required to remove the event from a particular HTML element. This method requires two arguments,the first argument will be the event name while the second argument will be the function that is attached to the event listener. In this article, we have seen the example where we have discussed how we can simply remove an event attached to an HTML element.

About the author

Shehroz Azam

A Javascript Developer & Linux enthusiast with 4 years of industrial experience and proven know-how to combine creative and usability viewpoints resulting in world-class web applications. I have experience working with Vue, React & Node.js & currently working on article writing and video creation.