javascript - 如何在委托(delegate)中找到可点击元素的索引？

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>