I don't seem to understand why I can't remove the event listener where I added a text through insertAdjacentText when clicked. I really hope someone helps me. I've gone through hours trying to debug it.
const header = document.querySelector(`header h1`);
const button = document.querySelector(`header button`);
function addText() {
header.insertAdjacentText(`afterend`, `Yeah`);
console.log(`yeah`);
}
header.addEventListener(`click`, addText);
button.removeEventListener(`click`, addText);
Top comments (4)
My guess of what you want is this:
Add listener to button, upon clicking remove the listener from the button.
You've added listener to the header but you remove it from button.
Why it should work?
The element, event and callback together work like a signature.
You must remove the handler from the same element that you put it on or else the signature will be different.
I guess this is a common Javascript Problem.
javascript.info/bubbling-and-captu...
But please correct me when I'm wrong.