Ajax delete cell from row, recalculate rows moving cell onto next row
<p>Using the twitter bootstrap row/table structure with dynamic cell widths and I have a ajax scripts which delete a record from the database and removes the HTML. </p>

<p>But how would I go about re-calculating the rows after the delete? This is the part I cant get my head around the logic process.</p>

<p>E.g: If I delete a cell from the middle row, it would calculate if there was enough space available after the delete and move the cell onto the next line. Then loop onto next line/etc</p>

<p>Ideally it would be really cool if it worked with dynamic widths, so that all the spans add up to 12. It would only move an item onto the next row if there is definitely room.</p>

<p>If I delete a big/wide span and there was room for 2 small spans from the next line to replace. Etc I think you get the idea here.</p>

<pre><code>&lt;div class="row"&gt;
   &lt;div class="span4"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
   &lt;div class="span4"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
   &lt;div class="span4"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
   &lt;div class="span6"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
   &lt;div class="span2"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
   &lt;div class="span4"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div class="row"&gt;
   &lt;div class="span2"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
   &lt;div class="span8"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
   &lt;div class="span2"&gt;...&lt;a href=""&gt;Delete&lt;/a&gt;&lt;/div&gt;
&lt;/div&gt;

    $('a').click(function(e){    
    e.preventDefault();
    var $self = $(this);

    $.ajax({
        type: 'POST',
        url: ajaxAction,
        data: obj,
        dataType: 'json',
        success: function(data, status, jqXHR){
            if(data &amp;&amp; data.ok){
                $self.parent().slideUp("slow", function(){
                    if(delete_container.substring(0,5) == ".span"){

                        // get parent row
                        var row = $(this).parent();
                        if(row.hasClass("row") || row.hasClass("row-fluid")){
                            var count = 0;
                            row.children("[class*='span']").each(function(){

                                count = $(this).attr('class').match(/\d+/);                                     

                            });

                            if(count &lt; 12){
                                // check next line and move item up if it fits
                                // then loop over everything again on the next row
                            }
                        }                               
                    }
                    $(this).remove(); 
                })
            }   
        }
    });
});
</code></pre>
