cari

Rumah  >  Soal Jawab  >  teks badan

javascript - Isu mengenai operasi delegasi acara JS ul li tag

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;
            }
        }
    }
});
巴扎黑巴扎黑2714 hari yang lalu850

membalas semua(2)saya akan balas

  • 習慣沉默

    習慣沉默2017-06-28 09:29:49

    document.querySelector('#box').addEventListener('click',function(e){
    if(e.target.nodeName=="LI"){
        e.target.parentNode.removeChild(e.target);
    }
});

    balas
    0
  • 巴扎黑

    巴扎黑2017-06-28 09:29:49

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

    balas
    0
  • Batalbalas