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-listener更有效，特别是对于你从DOM中删除的项目。

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

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

我做了一个fiddle来说明我将如何继续做类似的事情。

为了完整起见：您编写的代码也不会起作用，因为您在回调中引用了i变量。在您的情况下，当执行回调时，i将始终等于循环分配的最后一个值。你需要将i重新分配给回调中的局部变量才能这样做（这样你就有了'副本'而不是引用）。此外，如果你关心IE lt 8，你必须重写它以使用遗留IE attachEvent api，但我假设（特别是基于什么）你不需要它。

Answer 2

var section2 = document.getElementById('section2').getElementsByTagName('p');
alert(section2.length)
for(var i = 0; i < section2.length; i++) {

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

用这个内部回调函数替换section2 [i]，

因为javascript闭包我将等于section2.length，

小提琴http://jsfiddle.net/v7FvW/1/

addEventListener（）不在元素列表上工作

2 个答案: