一个列表我要实现以下功能
-----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>