当一个子div被销毁时，将所有的子div移到父div内。

Question

我创建了这个jsbin：http://jsbin.com/qoriqihapara/1/edit

如你所见，我有两个问题我不知道如何解决

1. 如果您打开第一个聊天窗口，然后关闭第一个聊天窗口，然后再次打开第一个聊天窗口，您将看到两个聊天窗口重叠，这是因为right的计算并不完美。
2. 关闭不是第一个或最后一个聊天窗口(考虑打开多个聊天窗口)时，是否有任何方法希望将所有聊天窗口移到右侧？

代码：

var right = 10;
var rightPadding = 10;
function CreateDiv(id)
{
 var ToAppend = "<div class='Msg_container_dv' id='Msg_container_dv_" + id + "' style='right:" + right + "px' >"
                       + "<div class='Chat_Header_dv'>"
                       + "<table><tr>"
                       + "<td><a href='javascript:void(0)' onclick='closeChatwnd(\"Msg_container_dv_" + id + "\")' >close window</a></td>"
                       + "</tr></table>"
                       + "</div>"
                       + "<div class='Chat_Body_Container' id='Chat_Body_Container_" + id + "'>" + id + "...</div>"
                       + "<div class='Chat_Footer_Container'>text here...</div>"
                       + "</div>";
right = right + (280 + rightPadding); // 280 is the width of the chat window
$("#chat_div_container").append(ToAppend);

}
function closeChatwnd(id)
{
 $("#" + id).remove();
 right = right - (280 + rightPadding);
}

Answer 1

我建议这样做：

#chat_div_container
{
  padding-right:15px;
  position:fixed;
  bottom:0px;
  right:0px;
  width:200%; /*or more*/
}

对于Msg_container_dv

.Msg_container_dv
{
  height:280px;
  width:280px;
  border:1px solid #868686;
  bottom:0px;
  float:right;
}

简单又简单。

不要忘记从style='right:" + right + "px'中删除Msg_container_dv