title: why does removeChild in Javascript always removes the last child and not the one it got the id from?
body: <p>i have four divs with the eventlistener onclick, 
  calling a js function which just does the following : </p>
  
  <pre><code>this.parentNode.removeChild(this);
  </code></pre>
  
  <p>i expect it to remove the div i clicked on, but it does not.
  instead it deletes the last child and changes the id given after to the
  id of the removed child (first click, the last child) and by further clicking on the 
  other divs counts down the given id to one. removing
  the childNodes in the array from the last to the first.</p>
  
  <p>i tried a lot of variants, for example</p>
  
  <pre><code>document.getElementById('parentElementName').removeChild(this.gettAttribute('id'));
  </code></pre>
  
  <p>or</p>
  
  <pre><code>parent =document.getElementById('parentElementName');
  
  to_be_removed = document.getElementById(this.gettAttribute('id');
  
  parent.removeChild(to_be_removed);
  </code></pre>
  
  <p>or with childNodes // id = 1,2,3,4</p>
  
  <pre><code>to_be_removed =document.getElementById('box_content').childNodes[this.getAttribute('id')];
  
  parent =document.getElementById('box_content');
      parent.removeChild(to_be_removed);
  </code></pre>
  
  <p>strange i can successfully change the visibility or the backgroundColor:</p>
  
  <pre><code>document.getElementById('box_content').childNodes[this.getAttribute('id')].style.visibility='hidden';
  </code></pre>
  
  <p>or</p>