Jquery 当一个盒子被移除时，重新排列盒子

我有一堆用户可以创建的div，它们表示消息框。当用户单击其朋友的名字时，将创建一个框。我已经能够这样做了，当一个新的框被创建时，它被放置在正确的距离之外，但我还没有弄清楚如何使它，当一个框被移除时，其他框被移动，以填补空白，并为新框腾出空间。我知道我需要使用foreach，但我不知道如何引用框。提前感谢您的帮助

#chatbox{
    border:2px solid #0969A2;
    height:250px;
    width:200px;
    background-color:#fff;
position:fixed;
z-index:11002;
padding:3px;
}

    $('#open-chat').live('click', function() {
    var user=$(this).attr('data-name');
    //check if bar exists
    if ($("#bar-icon[data-name="+user+"]").length == 0){
        $('.dockleft-block').append('<div id="bar-icon" data-name="'+user+'">'+user+'</div>');
        $('body').append('<div id="chatbox" data-name="'+user+'"></div>');

        //position new boxes           
        $("#chatbox[data-name="+user+"]").css('bottom', '37px');

        var chatBoxeslength = $("div[id=chatbox]").length-1;

        if (chatBoxeslength == 0) {
            $("#chatbox[data-name="+user+"]").css('left', '35px');
        } else {
            width = (chatBoxeslength)*(225+7)+20;
            $("#chatbox[data-name="+user+"]").css('left', width+'px');
            $("#bar-icon[data-name="+user+"]").css('left', width-35+'px');
        }

    }
    //end if length
    });                                       
    //end click function


    $('.closechatbox').live('click', function() {
    user=$(this).attr('data-name');     
    $("#chatbox[data-name="+user+"]").remove();
    $("#bar-icon[data-name="+user+"]").remove();
//need to rearrange other boxes
    });

---

我不认为我能在渲染框时在脑海中清晰地看到框是如何布置的，但在移除框时可能不需要重新排列它们。例如，如果您将某个容器中剩余的每个新div浮动，当您删除一个时，所有剩余的div都将向左移动并填充该空间。它就像一堆书被重力压在书堆里。灵巧地拔出一个，其余的迅速进入空间

---

我知道这可能不太符合要求，但这比通过程序移动所有剩余部分并自己填补空白要简单得多。您可以免费获得重新排列。

为什么不直接引用聊天窗口div的数组呢。然后，在添加和删除它们时，调整阵列。调整阵列后，应重新定位阵列中的所有对象

大致如下：

var chatWindows = [];
var windowWidth = 100;
var padding = 10;

function newChatWindow(divElement)
{
   chatWindows.push(divElement);
   reposition();
}

function reposition()
{
   var el = null;
   for (var i = 0; i < chatWindows.length; i++)
   {
      el = chatWindows[i];
      el.style.bottom = 10
      el.style.right = windowWidth * i + padding;
   }
}

function removeChatWindow(index)
{
   var el = chatWindows[index];
   el.parentNode.removeChild(el);
   var newArr = [];
   for (var i = 0; i < chatWindows.length - 1; i++)
   {
      if (i != index)
      {
          newArr.push(chatWindows[i]);
      }
   }
   chatWindows = newArr;
   reposition();
}

---

我更新了我的代码，以显示从网站上写聊天的人做了什么，但我不明白这意味着什么或它是如何工作的。它们是固定位置的，所以它们不能浮动。虽然你的答案不完全是我需要的，但它很接近，让我进入了查看数组等的轨道。谢谢兄弟，谢谢你的时间。

var chatWindows = [];
var windowWidth = 100;
var padding = 10;

function newChatWindow(divElement)
{
   chatWindows.push(divElement);
   reposition();
}

function reposition()
{
   var el = null;
   for (var i = 0; i < chatWindows.length; i++)
   {
      el = chatWindows[i];
      el.style.bottom = 10
      el.style.right = windowWidth * i + padding;
   }
}

function removeChatWindow(index)
{
   var el = chatWindows[index];
   el.parentNode.removeChild(el);
   var newArr = [];
   for (var i = 0; i < chatWindows.length - 1; i++)
   {
      if (i != index)
      {
          newArr.push(chatWindows[i]);
      }
   }
   chatWindows = newArr;
   reposition();
}