4 ways to remove click events from html elements

In this tutorial, we’re going to learn four ways in which we can remove a click event from an HTML element. There may be more ways than four, of which I am not aware of, so please do well to leave them in the comments below if I haven’t listed what you know.

So for this tutorial, we are going to be using a button.

Let’s get started.

Removing pointer-events in CSS

The first method on the list, is removing pointer-events in CSS. This makes sense because, if an HTML element has no pointer-events, it cannot be clicked. Let’s see how it works.

Imagine we have a button on an HTML page:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>4 ways to remove click events from html elements</title>
  </head>
  <body>
    <button class="clicker">click</button>
  </body>
</html>

With the following event listener in javascript:

document.querySelector(".clicker").addEventListener("click", () => {
  alert("clicked");
});

We can actually remove the click event on this button by applying the following css styles to it:

.clicker {
  pointer-events: none;
}

And once you do this, you will no longer be able to click the button, and the event handler function will no longer run.

Setting onclick to null

So the second way to achieve this, is by setting the onclick attribute of the button to null. But please note, this method will only work if you’ve added the event listener to the button by using the onclick attribute. Here’s how it works:

Imagine you have a button with an onclick attribute:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>4 ways to remove click events from html elements</title>
  </head>
  <body>
    <button onclick="myfunction()" class="clicker">click</button>
  </body>
</html>

With the implementation of myfunction in javascript as:

function myfunction() {
  alert("hello");
}

This is how you can remove the click event by setting onclick to null:

document.querySelector(".clicker").onclick = null;

Removing the onclick attribute

The third way you can remove click events from an HTML element, is by entirely removing the onclick attribute from the HTML element.

And again, this method will only work if you’ve added the event listener to the button by using the onclick attribute.

So, considering the HTML code in method 2, this is how you can remove click events from an HTML element using this method:

document.querySelector(".clicker").removeAttribute("onclick");

By adding the above line of code to your javascript, the button will no longer be clickable.

Using removeEventListener

The final, and my favorite way of removing click events from HTML elements, is by using the removeEventListener method.

So, considering the following HTML page with a button:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>4 ways to remove click events from html elements</title>
  </head>
  <body>
    <button class="clicker">click</button>
  </body>
</html>

And the button having an event listener like this:

const button = document.querySelector(".clicker");
button.addEventListener("click", myfunction);

function myfunction() {
  console.log("hello");
}

Using the removeEventListener method, this is how you can remove the click event:

button.removeEventListener("click", myfunction);

As you can see, the removeEventListener method takes two arguments that are required. The first one being the event you want to remove, and the second one is the function attached to that event.

Because the removeEventListener method requires the name of the function as the second argument, I didn’t use an arrow function or an anonymous function as the second argument in the addEventListenermethod. I had to define the function separately, then use the name of the function in the addEventListener and removeEventListener methods.

Hope you’ve learnt something from this? If you have any other methods or suggestions on how to remove click events, please share them with us in comments below.

Ciao!

Removing pointer-events in CSS#

Setting onclick to null#

Removing the onclick attribute#

Using removeEventListener#

Removing pointer-events in CSS

Setting onclick to null

Removing the onclick attribute

Using removeEventListener