怎样使div层删除后从新排序

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title>Untitled Page</title>
    <script type="text/javascript">
//添加层
    var num=1;
        function CreateDiv()
        {   
     var box = document.createElement("div");
             box.id= "div_"+num;           
 box.setAttribute("onclick","divId('div_"+num+"')"); 
 box.style.width="100px";
  box.style.height="100px"
  box.style.backgroundColor="red";
   box.innerHTML="fsfsafasf"+num;
 document.getElementById("div_pannel").appendChild(box);    
// document.getElementById('text'+num).focus(); 
         num+=1;

        }
        function RemoveDiv(obj)
        {
        var ob = document.getElementById(obj);   
         ob.parentNode.removeChild(ob);
        }
function abb(){
  document.getElementById('text'+num).focus();
}

//删除
   function delBotton(){
   var cont =delId;
   cont.parentNode.removeChild(cont);
 }
 //得到要删除的DIV的ID
function divId(aa){  
  delId=document.getElementById(aa);  
 
}function blurInput(inputId)
{
    var input=document.getElementById(inputId);  
input.style.border="hidden";
input.style.background="#eeeeee";
}       
    </script>
</head>
<body>    <form id="form1" runat="server">
    <input  type="button" value="新增" onclick="CreateDiv()" /><input type="button" value="删除" onclick="delBotton()" />
    <div id="div_pannel">
    </div>
    </form>
<div onclick="abb()">点击</div>
</body>
</html>  想让点击删除任意一个，上面的序号从新排序

解决方案 »

  1.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
    <head runat="server">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
      <title>Untitled Page</title>
      <script type="text/javascript">
    //添加层
      var num=1;
      function CreateDiv()
      {   
    var box = document.createElement("div");
      box.id= "div_"+num;   
    box.setAttribute("onclick","divId('div_"+num+"')");  
    box.style.width="100px";
    box.style.height="100px"
    box.style.backgroundColor="red";
    box.innerHTML="fsfsafasf"+num;
    document.getElementById("div_pannel").appendChild(box);   
    // document.getElementById('text'+num).focus();  
    num+=1;  }
      function RemoveDiv(obj)
      {
      var ob = document.getElementById(obj);   
      ob.parentNode.removeChild(ob);
      }
    function abb(){
    document.getElementById('text'+num).focus();
    }//删除
      function delBotton(){
      var divs = document.getElementById('div_pannel').getElementsByTagName('div');
       document.getElementById('div_pannel').removeChild(divs[divs.length - 1]);
       num--;
     }
     //得到要删除的DIV的ID
    function divId(aa){   
      delId=document.getElementById(aa);   
     
    }function blurInput(inputId)
    {
      var input=document.getElementById(inputId);   
    input.style.border="hidden";
    input.style.background="#eeeeee";
    }    
      </script>
    </head>
    <body>  <form id="form1" runat="server">
      <input type="button" value="新增" onclick="CreateDiv()" /><input type="button" value="删除" onclick="delBotton()" />
      <div id="div_pannel">
      </div>
      </form>
    <div onclick="abb()">点击</div>
    </body>
    </html>帮你改了下
      

  2.   

    这个你能实现吧
    就假设当前你要删的div为第N个
    从N开始向下 改ID属性不就行了
      

  3.   

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
    <html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title></title>
    </head>
    <body><script type="text/javascript">    //<![CDATA[    var container = null;    window.onload = pageInit;    function pageInit()
        {
            container = document.getElementById("container");        createDivs();
        }    function createDivs()
        {
            var fragment = document.createDocumentFragment();
            var div = null;
            for (var i = 0; i < 10; i++)
            {
                div = document.createElement("div");
                div.appendChild(document.createTextNode(i));
                fragment.appendChild(div);
            }
            container.appendChild(fragment);
        }    function deleteLastDiv(deleteIndex)
        {
            container.removeChild(container.childNodes[deleteIndex]);
    //重排序
            var len = container.childNodes.length;
            for (var i = 0; i < len; i++)
                container.childNodes[i].innerHTML = i;
        }    //]]></script><div id="container"></div><input type="button" onclick="deleteLastDiv(2)" value="delete(2)" /></body>
    </html>