JS初学者请前辈指点下啊 谢谢
用JS做出以下功能，翻了资料看，还是不明白到底用什么代码来实现如下的功能。
当鼠标滑过某一li时， 在其li文本后面出现一个超链接，点击链接可删除对应的这个li，求解答~~~在此谢过了
<ul>
<li>li列表1</li>
<li>li列表2</li>
<li>li列表3</li>
</ul>
[解决办法]
<!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script>
function init(){
var li=document.getElementsByTagName("li");
for(var i=0;i<li.length;i++){
li[i].onmouseover=function(){
if(this.getElementsByTagName("a").length<1){
var a=document.createElement("a");
a.setAttribute("href","#");
a.innerHTML="delete";
this.appendChild(a);
a.onclick=function(){
var p=this.parentNode;
var pp=p.parentNode;
pp.removeChild(p);
}
}
}
}
}
window.onload=init;
</script>
</head>
<body>
<ul>
<li>li列表1</li>
<li>li列表2</li>
<li>li列表3</li>
</ul>
</body>
</html>
这样试试
[解决办法]
<ul>
<li>li列表1</li>
<li>li列表2</li>
<li>li列表3</li>
</ul>
<script type="text/javascript">
window.onload = function(){
var lis = document.getElementsByTagName('li');
var len = lis.length;
for(var i=0;i<len;i++){
lis[i].onmouseenter = function(){
var a = document.createElement('a');
a.innerHTML = '删除';
a.id = 'delete';
this.appendChild(a);
a.onclick = function(){
var parent = this.parentNode;
parent.parentNode.removeChild(parent);
}
}
lis[i].onmouseout = function(e){
e = e
[解决办法]
window.event;
var tar = e.relatedTarget
------解决方案--------------------
e.toElement;
var a = document.getElementById('delete');
if(tar==a) return;
if(a){
this.removeChild(a);
}
}
}
}
</script>
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title> new document </title>
<script type="text/javascript">
function init()
{
//获取所有li
var li_list = document.getElementsByTagName("li");
//给li绑定mouseover&mouseleave事件
var the_a;
for(var i=0;i<li_list.length;i++)
{
li_list[i].onmouseenter = function(event)
{
the_a = document.createElement("a");
the_a.href = "#" ;
the_a.innerHTML = "删除";
//删除其从属父节点
the_a.onclick = function(event)
{
event.target.parentNode.parentNode.removeChild(event.target.parentNode);
}
event.target.appendChild(the_a);
}
li_list[i].onmouseleave = function(event)
{
var the_child = event.target.firstChild;
//获取最后一个子节点即a
while(the_child.nextSibling)
{
the_child = the_child.nextSibling ;
}
event.target.removeChild(the_child);
}
}
}
</script>
</head>
<body onload="init();">
<ul>
<li>li列表1</li>
<li>li列表2</li>
<li>li列表3</li>
</ul>
</body>
</html>
<ul id='ul'>
<li>123</li>
<li>456</li>
<li>789</li>
</ul>
<style text='text/css'>
#ul>li>.del{display:none;}
#ul>li:hover>.del{display:inline;}
</style>
<script type="text/javascript">
var ul = document.getElementById('ul'), li, a = document.createElement('a');
a.innerText = '删除';
a.className='del';
ul.onmouseover = function (e) {
if (e.target.tagName == 'LI') {
li = e.target;
if (!li.a) {
li.a = a.cloneNode(true);
li.appendChild(li.a);
}
}
}
ul.onclick = function (e) {
if (e.target.className == 'del') {
this.removeChild(e.target.parentNode);
}
}
</script>
还是写在 onload 中,javascript + css 的好处是 不用去处理冒泡事件
<script type="text/javascript">
window.onload = function () {
var ul = document.getElementById('ul'), li, a = document.createElement('a');
a.innerText = '删除';
a.className = 'del';
ul.onmouseover = function (e) {
if (e.target.tagName == 'LI') {
li = e.target;
if (!li.a) {
li.a = a.cloneNode(true);
li.appendChild(li.a);
}
}
}
ul.onclick = function (e) {
if (e.target.className == 'del') {
this.removeChild(e.target.parentNode);
}
}
}
</script>
