How can i remove an event listener from multiple elements in JavaScript?

Question

I'm working on a card game where the user has to select a card from a set of 4. If it is an Ace then they win if not then they lose. But I'm having some trouble removing the event listener of click from the set of cards after the first card has been clicked.

for(var i = 0; i < card.length; i++)
{
  card[i].addEventListener("click",display);
}

function display()
{
   this.setAttribute("src","CardImages/" + deck[this.id] + ".jpg");
   this.setAttribute("class","highlight");
   if(firstGo == 0)
   {
     firstGo++;
     firstCard = this;
     this.removeEventListener("click",display);
     console.log("card" + deck[this.id]);
   }
   else
   {
     alert("You've already selected a card");
     this.removeEventListener("click",display);
   }
}

@MatthewHerbst No, there are no error messages. The problem is that it doesn't remove the click event from the deck of cards. The program recognises that the card should not be clicked as the error message still works but the click event is still active on the cards. — seanrs97
– seanrs97, Commented Feb 28, 2016 at 19:32
You have a set of cards. Say 4. Player selects a card using click. Once he does that, you want to remove the click events from the remaining 3 cards. Did I get it right? — akinuri
– akinuri, Commented Feb 28, 2016 at 19:36
@akinuri Yes that's right. I just need the click event to disappear as soon as the first card has been clicked. — seanrs97
– seanrs97, Commented Feb 28, 2016 at 19:39

akinuri · Accepted Answer · 2016-02-28 19:53:04Z

You are adding click events using a loop because you have multiple cards.

for(var i = 0; i < card.length; i++) {
    card[i].addEventListener("click", display);
}

but you're removing the event listeners using

this.removeEventListener("click",display);

which will only remove the listener on the card you clicked. If you want to remove the listener on other cards too, you should also remove them in a loop.

function display() {
    this.setAttribute("src","CardImages/" + deck[this.id] + ".jpg");
    this.setAttribute("class","highlight");
    if (firstGo == 0) {
        firstGo++;
        firstCard = this;
        // this.removeEventListener("click",display);
        for (var i = 0; i < card.length; i++) {
            card[i].removeEventListener("click", display);
        }
        console.log("card" + deck[this.id]);
    } else {
        alert("You've already selected a card");
        // this.removeEventListener("click",display);
        for (var i = 0; i < card.length; i++) {
            card[i].removeEventListener("click", display);
        }
    }
}

Here's a working demo.

var cards = document.getElementsByClassName("card");

for (var i = 0; i < cards.length; i++) {
  cards[i].addEventListener("click", display);
}

function display() {
  this.classList.add("highlight");
  for (var i = 0; i < cards.length; i++) {
    cards[i].removeEventListener("click", display);
  }
}

.card {
  float: left;
  padding: 50px 40px;
  border: 1px solid rgba(0,0,0,.2);
  margin: 5px;
  background: white;
}
.card:hover {
  border: 1px solid rgba(0,0,255,.4);
}
.card.highlight {
  border: 1px solid rgba(0,200,0,.5);
}

<div class="card">1</div>
<div class="card">2</div>
<div class="card">3</div>
<div class="card">4</div>

That's it, Thankyou so much!. I knew it was going to be something stupid like that.

D. Logajan · Accepted Answer · 2016-02-28 20:38:21Z

1

I'm not sure what your card array looks like, but I filled in the rest on a codepen and it seems to be successfully removing the eventListener. Is your card array referencing specific DOM elements like this for example?

var a = document.getElementById('A');
var b = document.getElementById('B');
var c = document.getElementById('C');
var card = [a, b, c];

answered Feb 28, 2016 at 20:38

D. Logajan

113 bronze badges

Collectives™ on Stack Overflow

How can i remove an event listener from multiple elements in JavaScript?

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related