Avoid Whitespace in Foundation Blockgrid when hiding Elements

So, if you're working with foundation and use the blockgrid and dynamically hide and show elements, with more than one row you will get whitespace - ugly!

Adding

style=display:none;

via js will hide element, but if there are say 2 rows and you hide last of row 1 there will be whitespace.
This is a result of how foundation calculates (or more precisely counts) the elements <li>.

Now the Tip:
If you don't care about the elements order, simply do the following to every element you hide:

jQuery('#li-Id').appendTo("#ul-Id");

This will simply put the selected element to the end of your ul container, producing a nice and clean flow of your blockgrid elements without whitespace.

Example of the Problem:
http://foundation.zurb.com/forum/posts/581-block-grid-in-combination-with-visibility-not-working-as-expected

Stackoverflow thread on reordering lists:
http://stackoverflow.com/questions/3814025/jquery-move-list-item-to-end-of-list