JQuery / infinitescroll & isotope - check for duplicates and remove

Question

I am using infinitescroll (https://github.com/paulirish/infinite-scroll) with isotope (http://isotope.metafizzy.co/). I currently check to see if an element with an id exists in the current container and if that same ID exists in the newly loaded data I need to remove it. The below code will alert when the element with the same ID is present in the new results but does not remove it. Can anyone assist?

 // Infinite Ajax Scroll configuration
            $container.infinitescroll({
                navSelector: "div.paginate",
                nextSelector: "div.paginate a",
                itemSelector: "div.element",
                loading: {
                    //finished: undefined,
                    finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>", //doesn't work, workaround below
                    img: "public/img/ajax-loader.gif",
                    msg: $('<div id="infscr-loading"><img alt="Loading..." src="public/img/ajax-loader.gif" /></div>'),
                    }
            },
            function(newElements) {

                var $newElements = $(newElements).css({opacity: 0});
                //remove the first item
                $newElements.splice(0, 1);

                if($newElements.length == 0){
                  $('div#infscr-loading').hide();
                  $("div#infscr-finished").fadeIn(1000);
                  $("div#infscr-finished").fadeOut(1500);

                    //remove infinate scroll 
                    $container.infinitescroll('destroy');
                } else {

                //remove any repeated discounts
               /* $(".element").each(function() {
                    var discount_id = "#" + this.id;
                    if($newElements.find(discount_id)){
                       $container.find(discount_id).remove();
                    }
                });*/



var uniqueElements = $(newElements).filter(function(i, el) {
    return !$('#container').find('#' + $(el).attr('id')).length
});

console.log( uniqueElements );


                $container.isotope('appended', $newElements);

                }

            });

Answer 1

This Solved your problem. http://jsbin.com/uCOyimAc/1/edit

 var newElements = ['<div class="element" id="id1">1</div>', '<div class="element"  id="id5">4</div>', '<div class="element" id="id2">2</div>'];
 var splice_count = 0;
 $(newElements).each(function(key,val){
     var id = $(val).attr('id');
     if($("#container").find('#'+id).length){
         newElements.splice(key-splice_count,1);
         ++splice_count; 
     }
  });
  console.log(newElements);

Answer 2

Try using the filter method to remove any duplicates. I assume you have a #container div that contains all teh div.element items. In your example we are filtering all the $newElements that are not found in the #container div.

$container.infinitescroll({
    navSelector: "div.paginate",
    nextSelector: "div.paginate a",
    itemSelector: "div.element",
    loading: {
        finished: undefined,
        finishedMsg: "<em>Congratulations, you've reached the end of the internet.</em>",
        img: "public/img/ajax-loader.gif",
        msg: $('<div id="infscr-loading"><img alt="Loading..." src="public/img/ajax-loader.gif" /><div></div>'),
    },
    errorCallback: function() {
        alert('no discounts');
    },
}, function(newElements) {
    var $newElements = $(newElements).css({opacity: 0});
    //remove the first item
    $newElements.splice(0, 1);
    //remove any repeated discounts
    return $newElements.filter(function(i, el) {
        return !$('#container').find('#' + $(el).attr('id')).length
    })
});

I forked your fiddle and added a filter function as well.

var newElements = ['<div class="element" id="id1">1</div>', '<div class="element" id="id4">4</div>', '<div class="element" id="id5">5</div>'];

$('.update').click(function(e) {

    var uniqueElements = $(newElements).filter(function(i, el) {
        return !$('#container').find('#' + $(el).attr('id')).length
    });

    console.log( uniqueElements );

});

http://jsfiddle.net/aBSP2/

Answer 3

Your code should work. To humour me, try changing...

$newElements.find(discount_id).remove();

to:

$(newElements).find(discount_id).remove();

It may be to do with an element caching issue, or the .css attribute change being assigned back to the variable.