一个列表我要实现以下功能
-----Jquery
1：点击li，弹出当前索引值
2：点击li中的删除button，删除当前li
3：动态添加li也要有这样的效果
/*append从后添加li*/ $("#add").click(function(){ // alert("后面添加li"); $("#oUl").append("<li>append后面添加<button>删除当前li</button></li>"); console.log($("#oUl").children().length) }) /*从前面添加li prepend*/ $("#addbefore").click(function(){ //alert("前面添加li"); $("#oUl").prepend("<li>prepend前面添加li<button>删除当前li</button></li>"); console.log($("#oUl").children().length) }) /*删除当前li*/ $("#oUl").on("click","li",function(){ //依次弹出li当前索引值 alert($(this).index()); var aLi = document.querySelectorAll("#oUl li"); var len = aLi.length; for(var i=0;i<len;i++){ //删除当前li $(aLi[i]).find("button").click(function(){ alert("shanchu "); $(this).parent().remove(); }); } })-----JS
function itemLi(){//页面初始化时li的删除事件 var aLi = document.querySelectorAll("li"); var len = aLi.length; for(var i=0;i<len;i++){ itemChild(aLi[i],"button") } } function itemChild(data,tag){//动态新增的li的删除事件 var oBtn = data.getElementsByTagName(tag)[0]; oBtn.onclick = function(){ return this.parentNode.remove(this.parentNode) } }; window.οnlοad=function(){ var oUl = document.querySelector("ul"); var oBtn = document.getElementById("add"); itemLi(); oBtn.onclick = function(){ var aLi = document.createElement("li"); aLi.innerHTML="sssss<button>删除当前li</button>"; oUl.appendChild(aLi); itemChild(aLi,"button"); } oUl.addEventListener("click",function(ev){ deltChild(ev); },false) function deltChild(ev){ var ev = ev || event; var target = ev.target || ev.srcElement; var aLi = document.querySelectorAll("li"); var len = aLi.length; for(var i=0;i<len;i++){ if(aLi[i]==target){ alert(i+"---"+aLi[i].innerHTML); } itemChild(aLi[i],"button") } } <div class="oDiv"> <ul id="oUl"> <li>aaaa<button id="" >删除当前li</button></li> <li>bbb<button id="" >删除当前li</button></li> <li>ccca<button id="" >删除当前li</button></li> <li>ddda<button id="" >删除当前li</button></li> </ul> <button id="add" >添加li</button> </div>