用JS做出以下功能,翻了资料看,还是不明白到底用什么代码来实现如下的功能。当鼠标滑过某一li时, 在其li文本后面出现一个超链接,点击链接可删除对应的这个li,求解答~~~在此谢过了
<ul>
    <li>li列表1</li>
    <li>li列表2</li>
    <li>li列表3</li>
</ul>

解决方案 »

  1.   

    或许我这个比你现在这个要求更复杂一点,思路在放开一点,步子在迈得大一点:
    http://www.cnblogs.com/jikey/archive/2013/03/08/2950900.html
      

  2.   

    LZ的例子,对于,你的这个问题,是有点复杂了,你自己简化一下应该就OK了
    只要使用好node.parentNode.removeChild(node);这个应该就可以实现了。
      

  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">
    <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>
    这样试试
      

  4.   

    我是在自学,还没有接触到jquery,现在才到dom元素这里.......
      

  5.   

    <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>用jQuery比较简单。
      

  6.   

    原生JS可以像我下面这样写,但是Chrome不支持mouseleave&mouseenter,所以最好还是用JQ实现吧。
    <?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>
      

  7.   

        <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>
    javascript+css   只绑定了 两 个事件
      

  8.   

    还是写在 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>