addEventListener() 不适用于元素列表

Question

我有一个段落元素数组。当每个<p>元素被点击时，我希望该元素从 DOM 中删除。我编写的代码仅在元素由其 id 指定时才有效。我尝试使用this关键字，并循环遍历元素，但没有成功，如下面的代码所示。

我在这里做错了什么？我怎样才能克服它？

<div class="section" id='section2'>
<a name="section-two" href="#top">Section Two</a>

        <p id='tester'>Text here <span><img src='images/remove.png' height='20px'/></span></p>
        <p>Text here. <span><img src='images/remove.png' width='20px'/></span></p>
        <p>Text here. <span><img src='images/remove.png' height='20px'/></span></p>
        <p>Text here. <span><img src='images/remove.png' height='20px'/></span></p>
    </div>

var section2 = document.getElementById('section2').getElementsByTagName('p');

for(var i = 0; i < section2.length; i++) {

  section2[i].addEventListener('click', function() {
  section2[i].parentNode.removeChild(section2[i]);
  }, false);
}

Answer 1

我将一个侦听器附加到父级而不是子级，并检查单击的内容。这比附加 n 个侦听器更有效，尤其是对于您无论如何都会从 DOM 中删除的项目。

var parent = document.getElementById('section2');

parent.addEventListener('click', function (event) {
    if (event.target.tagName === 'P') {
        parent.removeChild(event.target);
    }
}, false);

我做了一个小提琴来说明我将如何继续做这样的事情。

为了完整起见：您编写的代码也不起作用，因为您i在回调中引用变量。在您的情况下，当执行回调时，i将始终等于循环分配的最后一个值。您需要i在回调中重新分配给局部变量才能执行此操作（这样您将拥有“副本”而不是引用）。另外，如果您关心 IE lt 8，则必须重写它才能使用旧版 IE attachEventapi，但我假设（没有特别的依据）您不需要它。