Can't remove all objects from ContentFlow coverflow carousel with remove function

Question

Before I describe my problem I'd like to outline exactly what I'm attempting

What I'm trying to do here is load different sets of items into a content flow based on buttons a user can press. I've already set up a function triggered by a button that will get the items associated with the name value I pass to it via AJAX (using the jQuery $.get) and put in a div with an ID of itemcontainer. This works great.

function getPictures(Gallery){
$.get( "getimages.php", {name : Gallery}, function( data ) {
for(x in data){
    $("#itemcontainer").append(data[x]);
}
addPictures();
}, "json" );
return false;

}

You'll see the function calls another function inside of it ( addPictures() ) that actually adds the pictures to the ContentFlow carousel from the div with an ID of itemcontainer via ContentFlow's addItem method.

     function addPictures(){ 
        clearBox();
        var it = ajax_cf.items;
        // Grabs pictures from 'itemcontainer' and iteratively adds them to 'flow'
        var ic = document.getElementById('itemcontainer');
        var is = ic.getElementsByTagName('img');
        for (var i=0; i< is.length; i++) {
          ajax_cf.addItem(is[i],"end");
        } 
      }  

You'll notice that the addPictures() function has a function inside it that I previously declare called clearBox(). clearBox() is supposed to loop through the items in my content flow and remove them so I can delete the old gallery of items in the ContentFlow carousel before loading new ones.

It works by looping through the list items (called items) which is a property of the ContentFlow object ajax_cf I create and run a method rmItem on the list element at index 0 for each item. Here's the clearBox function.

 var ajax_cf = new ContentFlow('ajax_cf');
      function clearBox(){
        alert("clear");
        var it = ajax_cf.items;
        var len = it.length;
        for(var i=0; i<len; i++){
         ajax_cf.rmItem(0);
        } 
        return false;
      }

If you want you can get the source or the docs here. http://www.jacksasylum.eu/ContentFlow/

Thanks in advance!

Answer 1

I don't know if you've fixed the problem yet, but here's a thought. Since these objects are in the DOM, try making your clearBox() method remove the items in the itemcontainer . So your method could look like:

function clearBox()
{
    alert("clear");
    var images = $('itemcontainer').children();

    for (var i = 0; i < images.length; i++)
    {
        $('itemcontainer').remove(images[i]);
    }
}

This way, you're forcing the ContentFlow object to remove the images and when your addPictures method continues, it will basically reinitialize the ContentFlow carousel.

This is untested but logically seems it would work because all the ContentFlow library's rmItem method would do is remove the object from the DOM, so you are choosing to do that yourself instead.