Question

<div class="row categories">
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
    <div class="span3 category">
        <a href="#" class="delete"></a> <!-- user clicks this one -->
    </div>
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
</div>
<div class="row categories">
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
    <div class="span3 category">
        <a href="#" class="delete"></a>
    </div>
</div>

This is a simplified sample of some html I am trying to manipulate with jQuery. When the user clicks delete the category is removed and then I want to rearrange the category divs so that the rows are filled from the top down.

To give an example: If the user clicks the delete that is labeled by the comment in the html above then I want to reshuffle the category divs so that the top row has three category divs in and the second row only has two in – this needs to work for any number of rows.

I have tried a few things but am not getting anywhere – I feel like I am missing some essential principle of DOM manipulation.

I have tried collecting all the category divs up as one object and then wrapping them in the relevant row tags but I get lots of “#DivElement does not have XXX property errors”. I have tried rebuilding the html from scratch but then I get lots of nasty event handler .bind problems (as I said, this is a simplified sample). The later is the closest I have got but it feels ugly and overly complicated.

I feel like collecting up the category divs and then rewrapping them is the way to go but I really don’t know …

Help would be much appreciated

Answer 1

Assuming there is a wrapper element (with id="container" in my example) try

var container = $('#container');
container.on('click','.delete', function(e){
    e.preventDefault(); // cancel the click
    $(this).closest('.category').remove(); // remove clicked category

    var elements = container.find('.category').detach(); // get all .category elements
    container.empty().append(elements); // clear container and re-append only the category elements
    for(var i = 0; i < elements.length; i+=3) {
      elements.slice(i, i+3).wrapAll("<div class='row categories'></div>"); // wrap them every 3 categories..
    }
});

Demo at http://jsfiddle.net/f47bJ/2/