Reading Time: 3 minutes

1,855 Views

Inside this article we will see the concept i.e JavaScript Remove All Event Listeners From an Element. Article contains the classified information about removing all event using javascript from an element. Tutorial is super easy to understand and implement it in your code as well.

If you are looking for a solution to remove all events attached with an element using javascript then this article will help you a lot for this.

Learn More –

Let’s get started.

JavaScript Remove All Event Listeners

Create index.html file in your localhost path. Open file and add this code into it.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <title>JavaScript Remove All Event Listeners From an Element</title>
</head>

<body>
    <div id="element-box" style="background-color: salmon; width: 100px; height: 100px;padding:20px;">
        Box 1
    </div>

    <script>
        const elementBox = document.getElementById('element-box');

        // add 2 event listeners
        elementBox.addEventListener('click', function handleClick() {
            console.log('div element clicked first');
        });

        elementBox.addEventListener('click', function handleClick() {
            console.log('div element clicked second');
        });

        // Remove event listeners from Element
        elementBox.replaceWith(elementBox.cloneNode(true));
    </script>
</body>

</html>

Inside above we have a div element. To this div element we have added 2 events which will be fired on click events.

Code Explanation

Get element box by ID

const elementBox = document.getElementById('element-box');

elementBox is reference of div by it’s ID.

Add click event listener

// add 2 event listeners
elementBox.addEventListener('click', function handleClick() {
    console.log('div element clicked first');
});

elementBox.addEventListener('click', function handleClick() {
    console.log('div element clicked second');
});

If you execute with these codes only, then you should see messages inside your console tab of developer tools.

Now,

To remove all added event listeners to element div by using it’s ID

// Remove event listeners from Element
elementBox.replaceWith(elementBox.cloneNode(true));

Once, you add above code.

You should see all added click events will be removed and nothing will work when you click on div.

We hope this article helped you to learn JavaScript Remove All Event Listeners From an Element in a very detailed way.

Online Web Tutor invites you to try Skillshike! Learn CakePHP, Laravel, CodeIgniter, Node Js, MySQL, Authentication, RESTful Web Services, etc into a depth level. Master the Coding Skills to Become an Expert in PHP Web Development. So, Search your favourite course and enroll now.

If you liked this article, then please subscribe to our YouTube Channel for PHP & it’s framework, WordPress, Node Js video tutorials. You can also find us on Twitter and Facebook.