javascript – Probleme mit der JS-Ereignisdelegierungsoperation ul li tag
巴扎黑
巴扎黑 2017-06-28 09:27:49
0
2
870

Lassen Sie mich zunächst über die Funktion sprechen, die ich erreichen möchte, nämlich auf ein Li-Tag in einem UL zu klicken, um das aktuell angeklickte Li zu entfernen.

Aber nachdem ich es immer wieder versucht hatte, konnte ich nicht den gewünschten Effekt erzielen.

Die aktuelle Frage lautet wie folgt

  1. Wie kann ich eine direktere Methode verwenden, um den Li-Index des aktuellen Klicks abzurufen? Der for-Schleifen-Index wurde von Baidu erhalten.

  2. Entfernen kann verwendet werden, aber es wird nicht entsprechend dem von mir angeklickten Li entfernt. Wenn ich beispielsweise auf 2 klicke, werden 3 oder 4 gelöscht. Ich weiß nicht, ob if(e.target == children[i ]) ist hier falsch

  3. Ein einmaliges Klicken hat keine Auswirkung. Ein zweites Klicken führt dazu, dass „removeChild“ ausgeführt wird.

HTML-Struktur

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

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

Antworte allen(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>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage