suchen

Heim  >  Fragen und Antworten  >  Hauptteil

javascript – Probleme mit der JS-Ereignisdelegierungsoperation ul li tag

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

Antworte allen(2)Ich werde antworten

  • 習慣沉默

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

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

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

    Antwort
    0
  • StornierenAntwort