Remove event listener (keydown)

Question

How to remove eventlistener in code below. This is an example but exactly the same I want to do in my project and it doesn't work.

Here is the code:

const removeClick = document.querySelector('.remove-click');
let border = 1;

borderBtn.addEventListener('keydown', (e) => changeBorder(e));

function changeBorder(e) {
   if (e.keyCode === 17) {
      borderBtn.style.border = `${++border}px solid black`;
      if (border === 6) {
         removeEvent();
      }
   }
}

function removeEvent() {
   borderBtn.removeEventListener('keydown', changeBorder)
}

Answer 1

You are passing an anonymous function (e) => changeBorder(e) as eventListener so it will be hard for you to remove it. Converting changeBorder to an arrow function will do the trick.

const removeClick = document.querySelector('.remove-click');
let border = 1;

borderBtn.addEventListener('keydown', changeBorder);

const changeBorder = (e) => {
   if (e.keyCode === 17) {
      borderBtn.style.border = `${++border}px solid black`;
      if (border === 6) {
         removeEvent();
         console.log('border 6px');
      }
   }
}

function removeEvent() {
   borderBtn.removeEventListener('keydown', changeBorder)
}