javascript - Isu mengenai operasi delegasi acara JS ul li tag
巴扎黑
巴扎黑 2017-06-28 09:27:49
0
2
877

Biar saya bercakap dahulu tentang fungsi yang ingin saya capai, iaitu klik pada tag li dalam ul untuk membuang li yang sedang diklik.

Tetapi selepas mencubanya berulang kali, saya tidak dapat mencapai kesan yang saya inginkan.

Soalan semasa adalah seperti berikut

  1. Bagaimana untuk menggunakan kaedah yang lebih langsung untuk mendapatkan subskrip li klik semasa Subskrip gelung untuk diperoleh daripada Baidu.

  2. Alih keluar boleh digunakan, tetapi ia tidak dikeluarkan mengikut li yang saya klik Contohnya, jika saya klik 2, ia akan memadam 3 atau 4. Saya tidak tahu jika (e.target == kanak-kanak. ]) salah di sini

  3. Mengkliknya sekali tiada kesan Klik untuk kali kedua untuk melaksanakan removeChild.

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

Kod 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;
            }
        }
    }
});
巴扎黑
巴扎黑

membalas semua(2)
習慣沉默
document.querySelector('#box').addEventListener('click',function(e){
    if(e.target.nodeName=="LI"){
        e.target.parentNode.removeChild(e.target);
    }
});
巴扎黑
<!DOCTYPE HTML>
<html>
<ul id="box">
    <li id="one" class="oneclass" data="2017" onclick="removeli(this);">0</li>
    <li onclick="removeli(this);">1</li>
    <li onclick="removeli(this);">2</li>
    <li onclick="removeli(this);">3</li>
    <li onclick="removeli(this);">4</li>
</ul>

<script>
function removeli(node){node.parentNode.removeChild(node);}
</script>
</html>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan