Remove Event Listener of Button

Question

How do I remove the event listener, so the alert box will not be popped up anymore after Remove Listener to prevent it from triggering pop_up button is clicked?

document.querySelector('#hihi-toggle').addEventListener('click', e => {
  alert("I am Jim")
});

function remove_event_listener_button() {
  //document.querySelector('#hihi-toggle').removeEventListener()
}

<button id="hihi-toggle" data-enabled="false">Alert Box </button>
<button onclick="remove_event_listener_button()">Remove Listener to prevent it from triggering pop_up</button>

Why not use the enabled attribute? `const hihi = document.getElementById('hihi'); hihi.addEventListener('click', e => { const enabled = e.target.dataset.enabled === "true"; if (enabled) alert("I am Jim"); }); document.getElementById('hihi-toggle').addEventListener('click', e => { const enabled = hihi.dataset.enabled === "true"; hihi.dataset.enabled = !enabled; });` — mplungjan, Mar 26 '23 at 09:33

AveN7ers · Accepted Answer · 2023-03-26T09:30:08.793

-1

const eventHandler = e => alert("I am Jim");

document.querySelector('#hihi-toggle').addEventListener('click', eventHandler);

function remove_event_listener_button() {
  document.querySelector('#hihi-toggle').removeEventListener('click',eventHandler)
}

edited Mar 26 '23 at 09:30

answered Mar 26 '23 at 09:26

AveN7ers

119
1
4

That won't work. The function you are trying to remove from the event listener isn't the same function that you added (even if it is identical). – Quentin Mar 26 '23 at 09:27
It does not work, unfortunately :) – James Tan Mar 26 '23 at 09:28
Try the fixed version. I had a brainfart there, sorry – AveN7ers Mar 26 '23 at 09:32

Remove Event Listener of Button

1 Answers1