jQuery won't remove pair for Memory Game - php

Question

I'm creating a memory game using jQuery and PHP (going off a script found here), and essentially what I'm trying to do is make it so that when two cards have been matched, they both are removed. But, I'm using two different images to be paired. In HTML form, each card looks like this:
<div class="card {toggle:'imagename'}">
<div class="off"></div>
<div class="on {toggle:'imageid'}"></div>
</div>
Essentially, when two cards are chosen the jQuery is suppose to check if the id's match. Originally it was suppose to check if the images match, but being two different images I couldn't do that (it'd only display one). Below is the jQuery:
function matchingCards(event, params){
$cards = $("."+params.css_class+".on:visible");
$.each($cards, function(index, card){
var $card = $(card);
$card.trigger("card_removed");
$card.parent(".card").unbind("*").before("<div class='card_ph'></div>").remove();
$card = null;
});
$cards_left = $("#game_board>.card");
if ( $cards_left.length == 0 ){
$(document).trigger("game_won", {});
/*
* quickFlip has a problem when working in IE: when the last
* element bound was removed the problem is caused by the bound
* resize event on the window and is causing
* the end game get stuck when the game is over...
*/
$(window).unbind("resize");
}
$cards_left = $cards = null;
};
function checkCards(){
$on_cards = $("#game_board .card>.on:visible");
if ( $on_cards.length == 2 ){
$(document).trigger("player_made_move");
// Get the first object css class
var css_class = $on_cards.parent(".card").metadata()["toggle"];
var $card = $(this);
var this_card = $card.children(".on").metadata()["toggle"];
$matched_cards = $on_cards.filter("."+this_card);
var event_name = "no_match";
if ( $matched_cards.length == 2 ){
event_name = "found_match";
}
if ( css_class == css_class ){
event_name = "no_match";
}
$(document).trigger(event_name, {css_class: css_class});
$matched_cards = null;
}
clearTimeout(chk_cards_timeout);
chk_cards_timeout = null;
$on_cards = null;
};
Any help would be appreciated.
Additional information:
The pairs have the same image name I just added "_desc" to one of them for the CSS class name (i.e. one image is titled "i1" and the other "i1_desc")
When a pair is found the cards sit there, they don't reset to original position or dissapear.

Answer 1

Try this flow.
1.When a card is clicked...change the class with "open". When is clicked again the class is changed with default one "hidden".
...each card has an id like image_name+desc ...so 2 cards will have the same id.
2.After each click use jQuery each() function to search for "open" class and get the id of the elements.
3) Compare those two ids,if are similar use each() function again to delete the elements. If you are not using each() function you will delete only 1'st element.
ps: don't forget to count, track the ids, score..etc.
...each() function in action http://api.jquery.com/jQuery.each/