removeEventListener not working as i expect

Question

I know there are questions with similars problems, nevertheless I didn't understand how to fix the problem.

I need a solution for this problem: I have a onClick listener added in html document, then, in js I try to remove it but I can't.

Here is my code:

<html>
  <head>
  </head>
  <body>
    <div id="my-div" style="background: green" onclick="increase(event)">
      0
    </div>

    <script src="app.js"></script>
  </body>
</html>

And in js:

function increase(event){

  let div = document.getElementById( event.currentTarget.id );

  let number = parseInt(div.innerHTML);
  number += 5;

  div.innerHTML = number;

  div.removeEventListener('click', increase); //but it doesnt get removed...
}

It's like I can't target the event listener added in the html file. How can I target it?

score 1 · Accepted Answer · answered Mar 29 '20 at 20:47

The listener that is set is not increase, it's basically an anonymous function () => increase(event) to which you don't have a reference.

Since you are setting it as onclick attribute, all you need to do is div.onclick = null.

However, it would be better to not use onclick in the first place since it relies on the functions existing in the global scope, prevents proper separation of code and markup and also prevents securing your page with CSP (content security policy).

If you were to adjust the event listener instead in app.js like this...:

document.getElementById('my-div').addEventListener('click', increase)

...then your existing code to remove the listener would work.

score 0 · Answer 2 · answered Mar 29 '20 at 20:46

To remove the inline event handler, since it wasn't attached with addEventListener, you can't remove it with removeEventListener. You can use removeAttribute though:

div.removeAttribute('onclick');

But inline handlers are horrible, and should be avoided whenever possible. It would be better to attach the listener in Javascript, with addEventListener:

document.querySelector('#my-div').addEventListener('click', increase);

Then it can be removed with removeEventListener:

document.querySelector('#my-div').removeEventListener('click', increase);

It looks like you're only trying to permit one click, after which the listener should be removed. If that's the case, it'll be easier to use { once: true } so that the listener will remove itself after a single event:

function increase(event){
  div.textContent = 5 + Number(div.textContent);
}

document.querySelector('#my-div').addEventListener('click', increase, { once: true });

(note that it's quicker and safer to use textContent over innerHTML - only use innerHTML when assigning or retrieving HTML markup)

M A Salman · Answer 3 · 2020-03-29T20:56:58.510

Your code will work if the event listener is added dynamically like

document.querySelector('div').addEventListener('click',increase(event));

Since you have set attribute onclick to the the element you can set onclick=false using element reference in your case inside the function

 div.onclick=false;

Run this to check if it works

function increase(event){
  let div = document.getElementById( event.currentTarget.id );
  let number = parseInt(div.innerHTML);
  number += 5;
  div.innerHTML = number;
  div.onclick=false;
  console.log("On click is set to false");
}

    <div id="my-div" style="background: green" onclick="increase(event)">
      0
    </div>

score 0 · Answer 4 · answered Mar 29 '20 at 20:59

Take a look at this one:

document.getElementById('my-div').addEventListener('click', increase);

function increase(event){
  let div = document.getElementById(event.currentTarget.id);
  let number = parseInt(div.innerHTML);
  number += 5;

  div.innerHTML = number;

  div.removeEventListener('click', increase); //but it doesnt get removed..
}

<html>
  <head>
  </head>
  <body>
    <div id="my-div" style="background: green">
      0
    </div>
  </body>
</html>

removeEventListener not working as i expect

4 Answers4