删除后jQuery / AJAX在多列div中留下白色空格

Question

I've got a multi-column(two column div) with a loop retrieving some information from MySQL. (Username, Hour, Message).

+---------------------------+   +---------------------------+
|  StackOverflow User       |   | StackOverflow User2       |
|  11:31 AM            X    |   | 11:37 AM              X   |
|                           |   |                           |
| Stack Overflow is a       |   | Tags make it easy to find |
| question and answer site  |   | interesting questions.    |
| for professional and      |   | All questions are tagged  |
| enthusiast programmers.   |   | with their subject areas. |
| It's built and run by you |   | Each can have up to 5     |
| as part of the Stack      |   | tags, since a question    |
| Exchange network of Q&A   |   | might be related to       |
| sites.                    |   | several subjects.         |
|                           |   | Click any tag to see a    |
+---------------------------+   | list of questions with    |
                                | that tag, or go to the    |
+---------------------------+   | tag list to browse for    |   
| StackOverflow User2       |   | topics that interest you. |
| 11:56 AM             X    |   +---------------------------+
|                           |   
| This post is not to       |   +---------------------------+
| explain anything but just |   | Stackoverflow User9       |
| to show how the divs are  |   | 2 days ago            X   |
| are the current moment    |   |                           |
| and to describe their     |   | Whoever sees this post    |
| issue that I'm unable     |   | I appreciate for the help |
| to know what is causing   |   | And who ever looks for    |
| if it's jQuery type of    |   | help in the same subject  |
| mansory or the Ajax.      |   | I hope you find what you  |
+---------------------------+   | are looking for as it can |
                                | be tough to find something|
                                | that you're both needing  |
                                | help with.. sometimes:)   |
                                +---------------------------+

My current issue is that, If I click on the X button to delete the post, It does delete it perfectly as I have set up, but after deletion it leaves the height of the box instead of the bottom box(box below the one deleted) taking it's space and moving to it's position. The issue as follows:

After clicking the delete button for the first post on the left.

                                +---------------------------+
                                | StackOverflow User2       |
                                | 11:37 AM              X   |
                                |                           |
                                | Tags make it easy to find |
                                | interesting questions.    |
                                | All questions are tagged  |
                                | with their subject areas. |
                                | Each can have up to 5     |
                                | tags, since a question    |
                                | might be related to       |
                                | several subjects.         |
                                | Click any tag to see a    |
                                | list of questions with    |
                                | that tag, or go to the    |
+---------------------------+   | tag list to browse for    |   
| StackOverflow User2       |   | topics that interest you. |
| 11:56 AM             X    |   +---------------------------+
|                           |   
| This post is not to       |   +---------------------------+
| explain anything but just |   | Stackoverflow User9       |
| to show how the divs are  |   | 2 days ago            X   |
| are the current moment    |   |                           |
| and to describe their     |   | Whoever sees this post    |
| issue that I'm unable     |   | I appreciate for the help |
| to know what is causing   |   | And who ever looks for    |
| if it's jQuery type of    |   | help in the same subject  |
| mansory or the Ajax.      |   | I hope you find what you  |
+---------------------------+   | are looking for as it can |
                                | be tough to find something|
                                | that you're both needing  |
                                | help with.. sometimes:)   |
                                +---------------------------+

Leaves the height of the element deleted instead of the Second post below going up and taking it's place. I believe the current issue stands with the jQuery of how it's checking for the elements height and auto adjusting but I'm unsure as if I delete another on the right it goes up correctly.

Here is the code I'm currently using.

jQuery multi-column height adjustment with left and right columns with it's CSS>

$(document).ready(function()
{
    var left_column_height = 0;
    var right_column_height = 0;
    var items = $('.item');

    for (var i = 0; i < items.length; i++)
    {
        if (left_column_height > right_column_height)
        {
            right_column_height+= items.eq(i).addClass('right').outerHeight(true);
        } else {
            left_column_height+= items.eq(i).outerHeight(true);
        }
    }
});

.wrap { width: 100% }
.wrap .item { width: 49%;float: left;clear: left; }
.wrap .item.right { float: right;clear: right; }

Ajax/jQuery for deleting the posts.

$(document).ready(function() 
{
    $('.postdelete').on("click",function() 
    {
        var iD = $(this).attr("id");
        var dataString = 'post_iD='+ iD;

        if(confirm("Sure you want to delete this update?"))
        {
            $.ajax(
            {
                type: "POST",
                url: "load_ajax/delete_message_ajax.php", // just passes a isset $_POST.
                data: dataString,
                cache: false,
                success: function(html)
                {

                    $("#stbody"+iD).slideUp()("slow",function(){ $("#stbody"+iD).remove().slideUp("slow"); } );
                }
            });
        }
        return false;
    });
});

Html Normal Div(probably not needed so I'll just make something to show how it is)

<div class="wrap" id="php get id">
    <div class="item">
        <div class="box">
            <a>StackOverflow User</a>
            <a>11:31 AM</a>
            <a>MESSAGE</a>
        </div>
    </div>
</div>

From what I know I just "figure" which seems to be more obvious that the issue is definetly coming from either the jQuery multi-column list or the AJAX post. I understand there is Mansonry and a couple of other scripts out there, but I'm someone who will choose smaller pieces of code to accomplish the same thing, plus I'll only use this here so I'd rather stick with a small piece of code than move to a larger one and cause stress on the server.

UPDATE 2 : After testing I believe the issue is in the jQuery because it only reads a .right and not .left so it only deletes the blank white space if I delete the right one as well.

Answer 1

First : Don't use $('#id'), just $('.class') for the event with $(this) to scope the element, (#id make some problems for multiple action).

To make a loop in jquery :

var items = $('.item');
items.each(function({
   ...
}); // not for(...){} with .lenght....

But its not a good solution for you ...

why don't you use .height() to have the height of you column ?

HLeft = $('.column.left').height();
HRight = $('.column.right').height();

to hide block :

$('.postdelete').on("click",function() {

    par=$(this).parents('.item');
    dataString = par.serialize('input');

... ajax sucess ...

        par.slideUp("slow",function(){ 
            $(this).remove(); 
        });

Html (dont forget the input for serialize)

<div class="column">
    <div class="item">
        <input type="hidden" name="post_id" value="myId" />
        <div class="box">
            <a>StackOverflow User</a>
            <a>11:31 AM</a>
            <a>MESSAGE</a>
        </div>
    </div>
</div>

For the style remove :

clear:left;
clear:right;

Use something like this :

.column       { width:50%; height:auto; margin:0; padding:0;  }
.column.left  { float:left;}
.column.right { float:right;}
.item         { width:100%; height:auto; float:left; }

See ya

Answer 2

Your problem is caused by the dom position of the box under the one you removed.

Here is a quick and dirty hack : http://jsfiddle.net/W3WEr/6/

$('.postdelete').on("click",function() 
{
    item = $(this).parents('div.item');
    item.slideUp("slow",function(){
        // Hack Dom position
        item.before( $('#last') );

        item.remove();
    });
    return false;
});

When you remove the first block on the left, you need to change the position of each node after it (so the float styles works the way they have to).

In short, after your ajax request you have to scan each nodes and place it in the right order in the dom.

Of course, it's just a quick hack, but i think it gives you the way to work this out.

Oh ! and by the way : slideUp("slow") , not slideUp()("slow"...)