我想通过下标删除li,li里面有一个删除按钮,点击删除可以删除li

http://img.mukewang.com/56ef5947000153b407940324.jpg

 http://img.mukewang.com/56ef59b60001e63211620642.jpg


js事件代码:

  

http://img.mukewang.com/56ef6db600016bca11160762.jpg

in23
浏览 4006回答 1
1回答

display_none

<!DOCTYPE html><html> <head>  <title> new document </title>    <meta http-equiv="Content-Type" content="text/html; charset=gbk"/>     <script type="text/javascript">   // 鼠标移动改变背景,可以通过给每行绑定鼠标移上事件和鼠标移除事件来改变所在行背景色。     function test(n){        n.onmouseover=function(){            n.style.backgroundColor="#f2f2f2";        }        n.onmouseout=function(){            n.style.backgroundColor="#fff";        }     }           window.onload = function(){    var x=document.getElementsByTagName("tr");     for(var i=0;i<x.length;i++){       test(x[i]);    }     }     // 编写一个函数,供添加按钮调用,动态在表格的最后一行添加子节点;         function add(){        var sNum=window.prompt('请输入学号','xh001');        var sName=window.prompt('请输入姓名','');        if(sNum!=null&&sName!=null){            var newtr=document.createElement('tr');            newtr.innerHTML='<td>'+sNum+'</td>'+'<td>'+sName+'</td>'+'<td><a href="javascript:;" onclick="del(this);">删除</a></td>';            var oTC=document.getElementById("table");            oTC.appendChild(newtr);                    }else{alert('请重新输入');}                var x=document.getElementsByTagName("tr");         for(var i=0;i<x.length;i++){           test(x[i]);        }     }     // 创建删除函数     function del(k){         var oG=k.parentNode.parentNode.parentNode;         var oP=k.parentNode.parentNode;         oG.removeChild(oP);     }  </script>  </head>  <body>        <table border="1" width="50%" id="table">       <tr>        <th>学号</th>        <th>姓名</th>        <th>操作</th>       </tr>         <tr>        <td>xh001</td>        <td>王小明</td>        <td><a href="javascript:del();">删除</a></td>   <!--在删除按钮上添加点击事件  -->       </tr>       <tr>        <td>xh002</td>        <td>刘小芳</td>        <td><a href="javascript:del();" >删除</a></td>   <!--在删除按钮上添加点击事件  -->       </tr>         </table>       <input type="button" value="添加一行" onclick="add()" />   <!--在添加按钮上添加点击事件  --> </body></html>参考这个
打开App,查看更多内容
随时随地看视频慕课网APP

相关分类

JQuery