Removing Event Listeners within ES6 Classes

December 29, 2022

Let’s say I have a button within my class in the function doStuff(). Can I delete this event listener within the Pet Class? Or do I need to globally do it.

Something like this:

I know I need to call myButton.removeEventListener(‘click’, myPet.sayHello)

class Pet {
  constructor () {
    this.age = 10;
    this.name = "Boris";
  }

  sayHello () {
    console.log('Bark Bark!')
  }

  doStuff() {
    const myButton = document.createElement('button');
    myButton.innerText = "Click me!";
    document.body.appendChild(myButton)
    myButton.addEventListener('click', this.sayHello)
  }
}

const myPet = new Pet();
myPet.doStuff();

>Solution :

Yes, you can remove the event listener inside the class.

class Pet {
  constructor () {
    this.age = 10;
    this.name = "Boris";
  }

  sayHello () {
    alert('Bark Bark!');
  }

  doStuff() {
    const myButton = document.createElement('button');
    document.body.appendChild(myButton);
    const listener = () => {
      this.sayHello();
      myButton.removeEventListener('click', listener);
    };
    myButton.addEventListener('click', listener);
  }
}

const myPet = new Pet();
myPet.doStuff();