javascript - 關於JS 事件委託操作ul li標籤的問題

Question

先說一下我想要實現的功能，就是在一個ul 裡面 點擊某個li標籤 就移除目前點擊的li。

但是搞來搞去就是沒能達到我想要的效果。

現在的問題如下

1. 怎麼用更直接的方法取得目前點擊的li下標，for循環取下標是百度淘來的。

2. 移除是可以用了，但是它不是按我點擊的li移除例如我點擊2 它會刪除3 or 4 不知道是不是if(e.target == children[i])這裡判斷不對

3. 點選一次沒效果，重點第二次才執行removeChild。

HTML結構

<ul id="box">
    <li id="one" class="oneclass" data="2017">0</li>
    <li>1</li>
    <li>2</li>
    <li>3</li>
    <li>4</li>
</ul>

JS程式碼

document.getElementById("box").addEventListener("click",function(e) {
    if(e.target && e.target.nodeName == "LI") {

        var children = this.children;    //获取ul里面的所有li元素集合
        for(var i=0;i<children.length;i++){
            if(e.target == children[i]) { //对比目标元素和li集合元素
                //alert("目标元素的下标为：" + i);    //输出目标元素的下标
              document.getElementById(e.target.parentNode.id).removeChild(document.getElementById(e.target.parentNode.id).childNodes[i]);
                return;
            }
        }
    }
});

Answer 1

雷雷

Answer 2

雷雷