javascript - RemoveEventListener not removing event -

the code below supposed add event listener each playing card in players hand while it's turn, , remove events while it's different player's turn.

it isn't working. player's cards remain clickable once event set on first turn.

taketurn ( playerindex ) {     console.log(this.name);     let handcards = document.getelementbyid(this.name).queryselector('.handcards');     let thecards = handcards.queryselectorall('.handcards .card');     let = this;     ( let h = 0; h < thecards.length; h++ ) {         thecards[h].addeventlistener("click", function onplaycard (){             let thesecards = handcards.queryselectorall('.handcards .card');             let discarded = that.playcard(thecards[h], thesecards, handcards);              that.gameinstance.discardpile.push(discarded);             console.log(that.gameinstance.discardpile);             ( let e = 0; e < thesecards.length; e++) {                 thesecards[e].removeeventlistener("click", onplaycard, false);             }             console.log(that.name + 'is done');             that.gameinstance.nextplayer( playerindex );         }, false);     } } 

i tried of ideas here , here, none of them quite solved problem.

any helps appreciated. might pull hair out soon. thought knew stuff.

the problem:

the problem you're adding unique function instance each card, trying remove them using function instance of clicked card. remove 1 card matches instance added clicked card.

so element 0 gets handler 0, element 1 gets handler 1, element 2 gets handler 2, , on...

when element clicked, element 2, iterate elements remove handler, you're providing handler 1 clicked, element 2. handler 2 useful removing element 2, , not others.

---

the solution:

i won't give solution given current code, except involve maintaining array of handlers parallel elements bound. work fine, think redesign of app may better.

---

a different approach:

imo, repeated binding , unbinding indication different approach needs taken in designing app.

you take object oriented approach, , represent each type of item in app "class" (constructor function). you'd have game manages game whole, card represents each instance of playing card, , player represent each player.

create card instance each card. perhaps other special ones dealer or deck , discard discard pile. card have properties representing value , suit, , .owner property references current holder of card. .owner player, discard pile or deck example.

the game has reference these objects, can coordinate them. deals cards changing .owner deck player. when player discards card, card's .owner changes discard.

so each object maintains own "state".

each item reference dom element, bind handlers. handler have reference dom element via this, need reference data associated entity. people create separate handler each object, , use closure reference data. use little known, yet extremely useful feature called eventlistener interface. i'll leave research topic.

how set up you. should game assign .owner card? or dealer? or should card passed owner (like player) , have assign .owner property? or should card have method receives new owner , assigns own .owner property? you.

hope gives ideas anyway.