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

woshiwo715 2011-07-27 12:46:13

<!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>

想让点击删除任意一个，上面的序号从新排序

...全文

156 3 打赏收藏转发到动态举报

写回复

用AI写文章

3 条回复

切换为时间正序

请发表友善的回复…

发表回复

愚者只看星不看答案 2011-07-27

打赏
举报





<!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>

s1120624175 2011-07-27

打赏
举报

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

MuBeiBei 2011-07-27

打赏
举报

<!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>