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 completeness 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.