javascript - 關於JS 事件委託操作ul li標籤的問題
巴扎黑
巴扎黑 2017-06-28 09:27:49
0
2
800

先說一下我想要實現的功能,就是在一個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;
            }
        }
    }
});
巴扎黑
巴扎黑

全部回覆(2)
習慣沉默

雷雷

巴扎黑

雷雷

熱門教學
更多>
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!