<!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>
点击增加多个div后,鼠标点击哪个div层上面,就删除哪个,不点击不删除,显示提示

解决方案 »

  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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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);   
    box.onclick = divId;
    // 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(){  
       document.getElementById('div_pannel').removeChild(this);
     
    }
    /*
    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.   


    <!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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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);   
    box.onclick = divId;
    // 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(){  
       document.getElementById('div_pannel').removeChild(this);
       var divs =  document.getElementById('div_pannel').getElementsByTagName('div');
       
       for(var i = 0; i < divs.length; i++){
    divs[i].innerHTML="fsfsafasf"+(i+1);   
    }
    num = divs.length+1;
     
    }
    /*
    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>
      

  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">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <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);   
    box.onclick = divId;
    // 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(a){
       document.getElementById('div_pannel').removeChild(a)
     }
     //得到要删除的DIV的ID
    function divId(){  
    this.style.border = '1px solid #000';
    var that = this;
    document.getElementById('shanchu').onclick = function(){
    document.getElementById('div_pannel').removeChild(that);
    var divs =  document.getElementById('div_pannel').getElementsByTagName('div');
       
       for(var i = 0; i < divs.length; i++){
    divs[i].innerHTML="fsfsafasf"+(i+1);   
    }
    num = divs.length+1;
    };
     
    }
    /*
    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="删除" id="shanchu" />
      <div id="div_pannel">
      </div>
      </form>
    <div onclick="abb()">点击</div>
    </body>
    </html>