一个列表常用的方法

一个列表我要实现以下功能  

-----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>