How do I remove the parent element and all its contents when child element is clicked?

You need to merge an event dropper into these a elements and then use .parentNode to find out what li element you are looking for.

You will still have to call .parentNode of this li because the javascript API needs to know the parent: elementoPai.removeChild(filho); .

That is:

var links = document.querySelectorAll('a'); 
for (var i = 0; i<links.length; i++){
    links[i].addEventListener('click', removerPai);
}

function removerPai(e){
    e.preventDefault();
    var li = this.parentNode;
    li.parentNode.removeChild(li);
}

jsFiddle: link

var links = document.querySelectorAll('a'); 
for (var i = 0; i<links.length; i++){
    links[i].addEventListener('click', removerPai);
}

function removerPai(e){
    e.preventDefault();
    var li = this.parentNode;
    li.parentNode.removeChild(li);
}

<ul>
   <li>
      <a href="#">example</a>
   </li>
   <li>
      <a href="#">example</a>
   </li>
</ul>