请教一个div的问题

下面的程序总是出现两个edit | delete 的显示，为什么？可是我只想要每行左边对应的那个，请问怎么修改？
<html>
<head>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
</head><body bgcolor="#FFFFFF" text="#000000">
<script>var overCol="#f1f1f1"
var currentDiv;function showDelete(self){
  self.style.backgroundColor = overCol;
 currentDiv = self;
 var theid = "del_icon";  var delDiv=document.createElement("div");
 delDiv.id=theid;
 var d=delDiv;
 d.style.textAlign="center";d.style.fontSize="11px";
 var edit = document.createElement("span");
 edit.title="编辑此条";edit.style.textDecoration="underline";
 var del =  document.createElement("span");
 del.title="删除此条";del.style.textDecoration="underline";
 edit.appendChild(document.createTextNode("edit"));
     d.appendChild(edit);
     d.appendChild(document.createTextNode(" | "));
 del.appendChild(document.createTextNode("delete"));
     d.appendChild(del); d.style.width="80px";
d.style.lineHeight="20px";
d.style.color="blue"; document.body.appendChild(d);  document.getElementById(theid).style.cursor="pointer";   var l= getAbsoluteLeft(self) + self.offsetWidth - 80;
   var t= getAbsoluteTop(self) + 5;
   var scrollT = self.parentNode.scrollTop;//减去出现滚动条的高度;
   var t= getAbsoluteTop(self) + 5 - scrollT;
   document.getElementById(theid).style.position="absolute";
   document.getElementById(theid).style.left = l+"px";
   document.getElementById(theid).style.top = t+"px";
 }function getAbsoluteLeft( ob ){
 if(!ob){return null;}
   var obj = ob;
   var objLeft = obj .offsetLeft;
   while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
     objLeft += obj .offsetParent.offsetLeft;
     obj = obj .offsetParent;
   }
 return objLeft ;
}
function getAbsoluteTop( ob ){
 if(!ob){return null;}
 var obj = ob;
 var objTop = obj .offsetTop;
 while( obj != null && obj .offsetParent != null && obj .offsetParent.tagName != "BODY" ){
   objTop += obj .offsetParent.offsetTop;
   obj = obj .offsetParent;
 }
 return objTop ;
}
</script>
<div id="list">
<div onMouseOver="showDelete(this);"   style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example1.com </div>
<div onMouseOver="showDelete(this);"    style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox  value="example.com" name="url_chkbox" >example2.com </div>
</div>
</body>
</html>

解决方案 »

  1.   

    你每次只增加不清除自然越来越多的"edit | delete"了
      

  2.   

    替你改了一下,但是还有其他问题,你自己改一改
    JS中添加一个方法:
    function del()
    {
    var del = document.getElementById("del_icon");
    del.parentElement.removeChild(del);
    }然后添加onMouseOut方法:
    <div id="list">
    <div onMouseOver="showDelete(this);" onMouseOut="del();" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example1.com </div>
    <div onMouseOver="showDelete(this);" onMouseOut="del();" style="padding:5px;border-bottom:1px dashed gray"><input type=checkbox value="example.com" name="url_chkbox" >example2.com </div>
    </div>
      

  3.   

    谢谢。但是我还有一个问题，那就是为什么开始在没有添加delete函数的时候，最右边出现的"edit | delete" 在鼠标移出后仍会自动消失，而下面的却还在增加呢？