Same Button Remove

[kadi]

I am trying to remove same button matching pairs using the code below but i am not not successful. As they are two button1 and button3 so if i click the matching pair button 1 and button 1 both should remove with score as 1. i.e., for every succesful pair score is incremented by 1.

<div id="score">Score: 0</div><button id="one" type="button" data-index="0">Button1</button><button id="two" type="button" data-index="0">Button1</button><button id="three" type="button" data-index="1">Button3</button><button id="four" type="button" data-index="1">Button3</button> <script> var Score = 0;    index = 0;    $("#one, #two, #three, #four").click(function () {        var dataIndex = $(this).data('index');    if (index == dataIndex) {        Score++;        $(this).hide();        if(dataIndex == 1) {            index = 0;        } else {           index++;           }    }      $("#score").html("Score: " + Score);});</script> 

[davej]

Do you mean if you click the matching buttons in sequence? You would need to remember what button was clicked last and test if the current click is the other button of the pair.

[kadi]

No not like what u said. its just like a matching pair game i am designing. if two are identical then it should vanish. as from my code there are two button1 and button3 that are identical. so if i click button1 and button1, both should vanish since they are identical and same is the case with button3 as well. score increment of 1 is given for every succesful identical pair. hope u understood what i am trying to say. i can give more info if needed.

[davej]

So like I said -- you need to click two buttons in sequence.

[Hadien]

You need to remember the buttons you pressed in order. So you need a variable to remember the 1st button (referenced "buttonA") so that when you select the 2nd button ("buttonB"). You can make the proper comparison.

var game ={      buttonA:null,       score:0    };$("button").clicked(function(){  if(!$(this).is(":visible")){    //selected button was already "removed", do nothing    return;  }  if(game.buttonA === null){    //You're selecting the 1st button in the sequence    // I disable it so that the user can't select the exact same button as buttonB    game.buttonA = $(this).prop('disabled', true);  }else{    //buttonA is NOT null, so you're selecting the 2nd button in sequence.    var buttonB = $(this);    if(game.buttonA.data("index") == buttonB.data("index")){      //setting buttons invisible, not display:none, so that they'll still       // take up space on the screen. This will preserve the original      // locations of all the buttons.      game.buttonA.css('visibility', 'hidden');       buttonB.prop('disabled', true)             .css('visibility', 'hidden');      //clearing buttonA for the next sequence...      game.buttonA = null;      game.score++;    }else{      //The 2 buttons don't match, undo changes from last invoke      // so that you can restart the sequence      game.buttonA = $(this).prop('disabled', false);      game.buttonA = null;    }  } })

After reading your initial post some more it looks like you also intend that specific pairs must be matched before others. If this is so you can use the current score to see if the buttonA matches the current score, if it doesn't don't set buttonA and don't disable.