removing event listener inside for loop javascript

Question

I'm trying to remove the event listener that I've added to my UL ; so that the listener function will only fire on the first click and will be cleared after that.

Is there a way to do this with pure js?

 var cardDeck = document.getElementById('listDeck').getElementsByTagName('li')

    for (var i = 0; i < cardDeck.length; i++) {
      cardDeck[i].addEventListener('click', flip, false)
    }

    function flip(e) {
      if (e.target && e.target.nodeName == "LI") {
      var firstMove = document.getElementById(e.target.id)
      firstMove.classList.add('open', 'show')
        console.log(e.target.id + 'card was clicked');
      }
    }

Answer 1

Just add option of {Once :true} to event listener. No need to write a code for it.Just try these

cardDeck[i].addEventListener('click', flip, {once:true} )

Here's the jsfiddle link

Reference link for this. Here

PS: The way you are adding evenListener to every element is not efficient. Use delegation instead of bubbling if possible for your use case.Here's fiddle for delegation

Answer 2

You could bind to the onclick method instead of using the addEventListener . Thus, after the click is performed just set onclick to null :

var cardDeck = document.getElementById('listDeck').getElementsByTagName('li')

for (var i = 0; i < cardDeck.length; i++) {
  cardDeck[i].onclick = flip.bind(cardDeck[i])
}

function flip(e) {
  if (e.target && e.target.nodeName == "LI") {
    var firstMove = document.getElementById(e.target.id)
    firstMove.classList.add('open', 'show')
    console.log(e.target.id + 'card was clicked');
    this.onclick = null;
  }
}

Answer 3

If you added an event handler via addEventListener , you can remove it using:

element.removeEventListener(event, function);

This allows you to selectively remove event handlers and not remove any other handlers that may have been registered.

function flip(e) {
    if (e.target && e.target.nodeName == "LI") {
        var firstMove = document.getElementById(e.target.id);
        firstMove.classList.add('open', 'show');
        console.log(e.target.id + 'card was clicked');
        e.currentarget.removeEventListener('click', flip);
    }
}

Answer 4

If you want to remove an event listener when it is called, you can use the removeEventListener on the DOM element like so :

  var cardDeck = document.getElementById('listDeck').getElementsByTagName('li') for (var i = 0; i < cardDeck.length; i++) { cardDeck[i].addEventListener('click', flip, false) } function flip(e) { //remove the event listener. this.removeEventListener("click",flip); if (e.target && e.target.nodeName == "LI") { var firstMove = document.getElementById(e.target.id) firstMove.classList.add('open', 'show') console.log(e.target.id + 'card was clicked'); } }