最新消息:雨落星辰是一个专注网站SEO优化、网站SEO诊断、搜索引擎研究、网络营销推广、网站策划运营及站长类的自媒体原创博客

javascript - addEventListener() not working on list of elements - Stack Overflow

programmeradmin4浏览0评论

I have an array of paragraph elements. When each <p> is clicked on I want that element removed from the DOM. The code I've written only works when an element is specified by its id. I've tried using the this keyword, as well as looping through the elements without any success as the code below shows.

What am I doing wrong here ? How can I overe it ?

<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);
}

I have an array of paragraph elements. When each <p> is clicked on I want that element removed from the DOM. The code I've written only works when an element is specified by its id. I've tried using the this keyword, as well as looping through the elements without any success as the code below shows.

What am I doing wrong here ? How can I overe it ?

<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);
}
Share Improve this question asked Dec 27, 2013 at 18:00 moonshineOutlawmoonshineOutlaw 7232 gold badges9 silver badges21 bronze badges
Add a ment  | 

2 Answers 2

Reset to default 5

I'd attach a listener to the parent, instead of the children, and check what was clicked. That's a bit more efficient than attaching n-listeners, especially on items you'd remove from the DOM anyway.

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

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

I made a fiddle to illustrate how I would go on about doing something like that.

For pleteness sake: The code you've written won't also work, because you're referencing i variable in a callback. In your case, when the callback would be executed, i would always be equal to the its last value assigned by the loop. You'd need to reassign i to a local variable in the callback to do that (that way you'd have a 'copy' and not a reference). Also if you care for IE lt 8 you'd have to rewrite that to use legacy IE attachEvent api, but I assumed (based on nothing in particular) that you don't need that.

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);
}

replace section2[i] by this inside callback function,

because of javascript closure i will be equal to section2.length,

fiddle http://jsfiddle/v7FvW/1/

发布评论

评论列表(0)

  1. 暂无评论