委任でクリック可能な要素のインデックスを見つける方法は？

Question

クリック可能な要素のインデックスはどのようにして見つけることができますか？ボタンをクリックしたときにインデックスliを取得する必要があるので、配列から削除することができます。

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

あなたが@indexを使用する場合は、データの属性を持つボタン自体に添付し、その使用することができます。

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>