JS - Remove <p> elements with click

by lasha

HTML

<p>1</p>
<p>2</p>
<p>3</p>
<p>4</p>
<p>5</p>
<p>6</p>
<p>7</p>
<p>8</p>
<p>9</p>
<p>10</p>
<p>11</p>
<p>12</p>

JavaScript

// When the document is clicked, codes below should remove all the paragraphs in the page.
// There are 12 paragraphs in the page, but codes below can just remove 6 of them.

var pElements = document.getElementsByTagName("p");
var i;

function clickHandler(event){
    var clicked = event.target || event.srcElement;
    console.log(clicked);
    clicked.parentNode.removeChild(clicked);
}

for (i=0; i < pElements.length; i++){
    pElements[i].addEventListener('click', clickHandler, false);
}

/* document.addEventListener('click', function (event) {
    var i, allParagraphElements = document.getElementsByTagName('p');
    console.log('allParagraphElements.length: ' + allParagraphElements.length);
    for (i = allParagraphElements.length-1; i >= 0; i -= 1) {
        console.log('i: ' + i);
        allParagraphElements[i].parentNode.removeChild(allParagraphElements[i]);
    }
}, false); */