Question

So I’m creating a random string value:

var randomString = function(stringLength) {
    var i = 0;
    stringLength = stringLength || 10;
    var chars = '0123456789ABCDEFGHIJKLMNOPQRSTUVWXTZabcdefghiklmnopqrstuvwxyz';
    var randomString = '';
    for (i = 0; i < stringLength; i += 1) {
        var rNum = Math.floor(Math.random() * chars.length);
        randomString += chars.substring(rNum, rNum + 1);
    }
    return randomString;
};

And associating it with a list element on one pane:

var addUniqueId = function($thumbnail) {
    var random = randomString(10);
    $thumbnail.attr('id', 'rand-' + random);
};

And then cloning it and moving that list element to the right:

    var cloneImage = function($thumbnail) {
        addUniqueId($thumbnail);
        var $lastImgAdded = $('.js-gallery-edit-pane li').last();
        var span = $('<span />');
        span.addClass('x').text('x');
        var $clone = $thumbnail.clone(true, true).appendTo($('.js-gallery-edit-pane')).prepend(span).hide().fadeIn(200).unbind('click');
        bindRemoveHandler($clone);
    };

Then I add an overlay to the list element on the left to “gray” it out. Everything works at this point.

From there, a user can remove the recently cloned items on the right hand side by clicking the “X” on the image. This works fine and removes that recently cloned image, however, the original overlay is not being found. It should be associated with the random string value, so I’m just looking for that in $('.js-gallery-select-pane').find('#rand-' + string).find('.overlay').remove(); but for some reason it’s not finding it…

Any idea why?

JSFiddle Demo

Answer 1

If you put an alert(string) in your code, you will see that the string already includes rand- so in your selector just do:

$('.js-gallery-select-pane').find('#' + string).find('.overlay').remove();

Here is the working JSFiddle