求教:JS如何用按键删除层

<script language="javascript">
var oDiv=null;
function selectDiv(obj)
{
oDiv=obj;
oDiv.style.cssText="width:100px;height:100px; border:1px solid #F00 ;background-color:#FC3";
}
document.onkeydown=function()
{
if(event.keyCode==46)
{
document.body.removeChild(oDiv);//删除
                  //oDiv.style.display="none";//隐藏 }
}
</script>
<div id="div1" style="width:100px;height:100px; border:1px solid #999 ;background-color:#FC3" onclick="selectDiv(this)">test</div>

解决方案 »

  1.   

    完整示例：<script language="javascript">
    var oDiv=null;
    function selectDiv(obj)
    {
    oDiv=obj;
    oDiv.style.cssText="float:left;width:100px;height:100px; border:1px dashed #F00 ;background-color:#FC3";
    }
    document.onkeydown=function()
    {
    if(event.keyCode==46)
    {
    if(oDiv!=null)
    {
    document.body.removeChild(oDiv);//删除
    //oDiv.style.display="none";//隐藏方式一
    //oDiv.style.visibility="hidden";//隐藏方式二
    oDiv=null;
    }
    else
    alert("请先选择Div");
    }
    }
    </script>
    <div id="div1" style="float:left;width:100px;height:100px; border:1px dashed #FC0 ;background-color:#FC3" onclick="selectDiv(this)">div1</div>
    <div id="div2" style="float:left;width:100px;height:100px; border:1px dashed #FC0 ;background-color:#FC3" onclick="selectDiv(this)">div2</div>
    <div id="div3" style="float:left;width:100px;height:100px; border:1px dashed #FC0 ;background-color:#FC3" onclick="selectDiv(this)">div3</div>
    <div id="div4" style="float:left;width:100px;height:100px; border:1px dashed #FC0 ;background-color:#FC3" onclick="selectDiv(this)">div4</div>
      

  2.   

    方法没能实现我要的东西,鼠标一直按住的话,你在按下DEL看看能删不.
    我需要点击鼠标,注意,并没有松开,一直按住,然后按DEL,实现隐藏,并实现鼠标自动弹起
    document.onkeydown=function()
    {
    if(event.keyCode==46)
    {
    if(oDiv!=null)
    {
    oDiv.style.visibility="hidden";
    oDiv.onmouseup;
    oDiv=null;
    }
    else
    alert("请先选择Div");
    }
    }
    我这么写可以实现鼠标自动弹起吗?而且会触发onmouseup引发的事件吗?
      

  3.   

    说起来有点空洞了，大家试下这段代码。点击一个层之后不要松开鼠标左键，然后你就会发现问题了，要删除别的层时候直接移动到层上就可以DEL了
    <html>
    <head>
    <title>test</title>
    <style type='text/css'>
    </style>
    <script language=JScript>
    var x0=0,y0=0,x1=0,y1=0;
    var offx=10,offy=10;
    var moveable=false;
    var hover='orange',normal='slategray';
    var index=10000;//z-index;
    var oDiv=null;
    function selectDiv(obj)
    {
    oDiv=obj;
    }
    document.onkeydown=function(){
        if(event.keyCode==46){
       if(oDiv!=null){
         oDiv.style.visibility="hidden";
         oDiv=null;
        }
       else
         alert("请先选择您要删除的功能模块!");
    }
    }
    //开始拖动;
    function startDrag(obj)
    {
           if(event.button==1)
           {
                   //锁定标题栏;
                   obj.setCapture();
                   //定义对象;
                   var win = obj;
                   //记录鼠标和层位置;
                   x0 = event.clientX;
                   y0 = event.clientY;
                   x1 = parseInt(win.style.left);
                   y1 = parseInt(win.style.top);
                   moveable = true;
           }
    }
    //拖动;
    function drag(obj)
    {
           if(moveable)
           {
                   var win = obj;
                   win.style.left = x1 + event.clientX - x0;
                   win.style.top  = y1 + event.clientY - y0;
       }}
    //停止拖动;
    function stopDrag(obj)
    {
           if(moveable)
           {
                   var win = obj;
                   obj.releaseCapture();
                   moveable = false;
           }
    }
    //获得焦点;
    function getFocus(obj)
    {
           if(obj.style.zIndex!=index)
           {
                   index = index + 2;
                   var idx = index;
                   obj.style.zIndex=idx;
           }
    }
    //创建一个对象;
    function  test(id,l,t,msg)
    {
           index = index+2;
           this.id      = id;
           this.left    = l;
           this.top     = t;
           this.zIndex  = index;
           this.message = msg;
           this.obj     = null;
           this.bulid   = bulid;
           this.bulid();
    }
    //初始化;
    function bulid()
    {
           var str = ""
                   + "<div id=test" + this.id + " "
                   + "style='"
                   + "z-index:" + this.zIndex + ";"
                   + "left:" + this.left + ";"
       + "top:" + this.top + ";"
                   + "font-size:10px;"
                   + "font-family:Verdana;"
                   + "position:absolute;"
                   + "cursor:default;"
       + "border:2px solid " + hover + ";"
                   + "' "
                   + "onmousedown='selectDiv(this);getFocus(this);startDrag(this)'"
       + "onmouseup='stopDrag(this)' "
       + "onmousemove='drag(this)' "
       + ">"
       + this.message 
       + "</div>"
           document.body.insertAdjacentHTML("beforeEnd",str);
    }
    function initialize()
    {
          //function test(id,l,t,msg)
          new test("1",120,100,"<table><tr><td>testtesttest</td></tr><tr><td>testtesttest</td></tr><tr><td>testtesttest</td></tr></table>");
          new test("2",240,100,"<table><tr><td>test001test001test001</td></tr><tr><td>test001test001test001</td></tr><tr><td>test001test001test001</td></tr></table>");
          new test("3",120,180,"<table><tr><td>test002test002test002</td></tr><tr><td>test002test002test002</td></tr><tr><td>test002test002test002</td></tr></table>");
    }
    window.onload = initialize;
    </script>
    </head>
    <body oncontextmenu='return false' scroll='no'>
    </body>
    </html>
      

  4.   

    先设置一个变量X，在任一个层的onfocus事件发生之后，将该层的ID传给这个变量。在页面的DELL键下时，将变量X对应的层隐藏。至于批量设置层的onfocus事件，可以通过HTC组件来。不过好像FF不支持HTC组件的。
      

  5.   

    javascript可以实现的，在网页上用一个变量记录当前选中的层对象或者是ID，按delete键时：
    removeChild 或者是 style.display="none" 这个取决于你想要怎么实现。