Reorganize all element's after hiding a element using jquery masonry

Question

I'm hiding a li and after hiding it there is a gap left in the html and i want to reload masonry and re-arrange the contents. I tried .masonry( 'reload' ) but i didn't work . Any help

Fiddle http://jsfiddle.net/emtBX/1/

JS

$(document).ready(function(){
              $('#container').masonry({
                // options
                itemSelector : '.item',
                columnWidth : 240,

                isAnimated: true,
                  animationOptions: {
                    duration: 750,
                    easing: 'linear',
                    queue: false
                  }
              });

              $('#butn1').click(function() {

                    $('#container ul li').eq(2).hide();
                    $('#container').masonry('reload');

              });
            });

Answer 1

You can hide the li-element and remove the .item class to reorder the elements, http://jsfiddle.net/emtBX/11/

$('#container ul li').eq(2)
    .css({'visibility': 'hidden', 'display': 'none'})
    .removeClass("item masonry-brick");

Answer 2

To answer Lewis comment and provide answer to people looking for solution in v3, in v3 hide method no longer exist you just have to use the hide() method of jquery and after you trigger a masonry layout. So idea is for hidding elements :

$('.something-to-hide').each(function(){
   $(this).hide();
});
$('.grid').masonry('layout'); //we assume grid is your class use to masonry container.

Then to show back the hidden elements :

$('.class-for-all-elements').show()
$('.grid').masonry('layout');

In my case I add to make some search before to hide that is why I used a each() function.

Stéphane

Answer 3

jquery masonry itself has a method called "hide" (http://masonry.desandro.com/methods.html#hide)

use it like this:

$('#container').masonry( 'hide', $('#container ul li').eq(2) ).masonry();

the last masonry() call does what you want: "reload" the tiles