4 ways to remove click events from html elements
Tags: webdev, beginners, css, html
Published: 2023-02-27 14:05:41

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:

```html
<!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:

```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:

```css
.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:

```html
<!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:

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

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

```javascript
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:

```javascript
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:

```html
<!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:

```javascript
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:

```javascript
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 `addEventListener`method. 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!