GUI items and elements in Javascript

Question

How do i make boxes similar to theses? I would like a X on the top right. Text on the left of it and the text below the image where the black area is. When i click on X it will remove these and the box on the right moves over and takes it place. How might i create this using jquery? is there some kind of GUI and container i could use to automate boxes moving when i close/delete them and etc

Answer 1

If you don't want any fancy animation effects with sliding and such, it's actually just a little CSS:

<style>
    .itembox {float:left;}
</style>

If all the boxes' widths fit evenly into the container (say, they are each 100px and the container is 300px wide) then they will stack up next to each other until they reach the bounds of their container, and then wrap left and stack again.

<div class="itembox"> <a href="#" class="close">x</a> ... </div>
<div class="itembox"> <a href="#" class="close">x</a> ... </div>
<div class="itembox"> <a href="#" class="close">x</a> ... </div>

Setting display:none will remove that one from the document flow and hide it, so the ones after it will collapse back. In JavaScript, on the click event for the close button, set the appropriate itembox's display to none:

$('.itembox .close').click(function() {
    $(this).parent('.itembox').hide();
});

In jQuery, hide() sets display:none.