title: can't understand why parentNode.removeChild doesn't work
body: <p>I am new at this and i am trying to understand few stuff.
  well, this is my HTML code:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>var counter = 0;
  
  function addMore() {
    counter++;
    var newFields = document.getElementById('dupDiv').cloneNode(true);
    newFields.id = 'dupDiv' + counter;
    newFields.name = 'dupDiv' + counter;
    newFields.style.display = 'block';
  
    var insertHere = document.getElementById('writeroot');
    insertHere.parentNode.insertBefore(newFields, insertHere);
    document.getElementById('test').value = newFields.name;
  }
  window.onload = addMore();</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table id="mainTable" style="width: 700" align="center" dir="rtl"&gt;
    &lt;tr&gt;
      &lt;td align="right" colspan="2"&gt;
        &lt;form method="post" name="f1"&gt;
          &lt;table align="right" width="600px"&gt;
            &lt;tbody id="dupDiv" style="display:none;"&gt;
              &lt;tr&gt;
                &lt;td class="a1"&gt;&lt;input type="text" value="pp" /&gt;&lt;/td&gt;
              &lt;/tr&gt;
              &lt;tr&gt;
                &lt;td class="a1"&gt;
                  &lt;input type="button" onclick="this.parentNode.parentNode.removeChild(this.parentNode);" value="DELETE" /&gt;
                &lt;/td&gt;
              &lt;/tr&gt;
            &lt;/tbody&gt;
            &lt;span id="writeroot"&gt;&lt;/span&gt;
            &lt;tr&gt;
              &lt;td class="a1"&gt;
                &lt;input type="button" onclick="addMore()" value="ADD MORE" /&gt;
              &lt;/td&gt;
            &lt;/tr&gt;
          &lt;/table&gt;
        &lt;/form&gt;
      &lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>As you can see, the code is working but it deletes only the button.
  And i want it to delete all the tbody that is created.
  ( I mean that i want to delete the specific tbody that the button was clicked at)</p>
  
  <p>And if it is possible i would like an explanation about parentNode in my code and to what element its connected every time.</p>
  
  <p>**This is not the whole code so some element may be missing</p>