How can I remove all images and add a new list of images?

Question

Using the Isotope plugin how can I remove all images that currently exist and load in a set of images on a press of a button?

In the documentation it says do this to remove a single item:

.isotope( 'remove', $items, callback )

How can I remove all the items and then load a new set of items? An example in jsfiddle would be wonderful.

Answer 1

I, too, recently needed to replace all isotope items with a new set of images.

This worked for me:

var $isoContainer = $('#image-feed');
$isoContainer.isotope('remove', $isoContainer.isotope('getItemElements'));
$isoContainer.isotope('appended', $newEntries);
$isoContainer.isotope('layout');

Answer 2

You could just use jQuery to delete the elements, and then trigger an isotope reLayout.

Example

$items.remove(); // you can remove multiple items with jQuery and also append new itmes
$item_parent.isotope('reLayout');

Read

It isn't necessary to use isotope to handle node deletions.

.append()

.isotope('reLayout')