Wie finde ich den Index eines klickbaren Elements bei der Delegierung?

Question

Wie kann ich den Index des klickbaren Elements finden? Ich würde den Index von li erhalten müssen, als seine Taste geklickt wurde, also kann ich es vom Array löschen.

var template = document.querySelector('#template'); 
    this.element.addEventListener('click', function(e) { 
     if(e.target && e.target.nodeName == 'BUTTON' && e.target.className == 'remove') { 
      //var index = ?? 
      //this.deleteTask(index); 
     } 
    }.bind(this)); 


    <script id="template" type="x-tmpl-mustache"> 
     <ul> 
      {{ #tasks }} 
       <li>{{ . }} - <button class="remove">X</button></li> 
      {{ /tasks }} 
     </ul> 
    </script> 

Answer 1

Wenn Sie @index verwenden, können Sie es auf die Schaltfläche selbst mit einem Datenattribut anhängen, und verwenden Sie dann das:

var template = document.querySelector('#template'); 
this.element.addEventListener('click', function(e) { 
    if(e.target && e.target.nodeName == 'BUTTON' && e.target.className == 'remove') { 
     var index = e.target.dataset.index; 
     // or possibly e.target.getAttribute('data-index'); 
     this.deleteTask(parseInt(index, 10)); 
    } 
}.bind(this)); 


<script id="template" type="x-tmpl-mustache"> 
    <ul> 
     {{ #tasks }} 
      <li>{{ . }} - <button class="remove" data-index="{{ @index }}">X</button></li> 
     {{ /tasks }} 
    </ul> 
</script>