recherche

Maison  >  Questions et réponses  >  le corps du texte

javascript - Problèmes liés à l'opération de délégation d'événements JS avec la balise ul li

Permettez-moi d'abord de parler de la fonction que je souhaite réaliser, qui consiste à cliquer sur une balise li dans un ul pour supprimer le li actuellement cliqué.

Mais après l’avoir essayé encore et encore, je n’ai pas pu obtenir l’effet souhaité.

La question actuelle est la suivante

  1. Comment utiliser une méthode plus directe pour obtenir l'indice li du clic actuel ? L'indice for de la boucle a été obtenu auprès de Baidu.

  2. Remove peut être utilisé, mais il n'est pas supprimé selon le li sur lequel j'ai cliqué. Par exemple, si je clique sur 2, cela supprimera 3 ou 4. Je ne sais pas si if(e.target == children[i. ]) est faux ici

  3. Cliquer dessus une fois n'a aucun effet. Cliquez dessus une deuxième fois pour exécuter RemoveChild.

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

Code 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 Il y a quelques jours847

répondre à tous(2)je répondrai

  • 習慣沉默

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

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

    répondre
    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>

    répondre
    0
  • Annulerrépondre