Question

I am working on a memory matching game. I have some code that checks if two images that the user clicked on have the same source and removes the images if they do have the same source.

(function compareClicked() {
    var lastclicked = "";
    $("img").click(function() {
        var path = $(this).attr("src");
        if( lastclicked == path) {
            $('img').hide(1000, function () {
            $(this).remove();
             });
        }
        else {
            if( lastclicked != "") alert("Not a match");
        }
        lastclicked = path;
    });
})();

However, as you can see, when they have the same source, it removes all of the images on the page – even if the user did not click any them. How can I change it so it only removes the two images that the user clicked on?

Answer 1

How about something like

var lastEl = null;

$(document).ready(function(){

$('img').each(function(index){
  $(this).attr('id','img-' + index);
});    

$('img').click(function(){
  if( lastEl ) {
    if( ($(this).attr('src') == lastEl.attr('src')) && ($(this).attr('id') != lastEl.attr('id')) ) {
      $(this).remove();
      lastEl.remove();
    }
    lastEl = null;
  } else {
    lastEl = $(this);
  }
});

});

Haven’t tested that, but it’s got to be pretty close

EDIT: Updated code in line with conversation below. JS fiddle here http://jsfiddle.net/joevallender/pc3Qa/3/

EDIT again: JS fiddle link should be correct now