title: unexpected auto-insertion of a tbody element: table is not row.parentElement
body: <p>Check this simple table:</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>const table = document.getElementById("table");
  
  table.addEventListener('click', e =&gt; {
    if (e.target.tagName === 'BUTTON') {
      const affectedRow = e.target.closest('tr');
      table.removeChild(affectedRow);
    }
  });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1" id="table"&gt;
    &lt;tr&gt;
      &lt;td&gt;row A&lt;/td&gt;
      &lt;td&gt;&lt;button&gt;delete row&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;row B&lt;/td&gt;
      &lt;td&gt;&lt;button&gt;delete row&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
    &lt;tr&gt;
      &lt;td&gt;row C&lt;/td&gt;
      &lt;td&gt;&lt;button&gt;delete row&lt;/button&gt;&lt;/td&gt;
    &lt;/tr&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Trying to remove a row using <code>table.removeChild(affectedRow)</code> gives me</p>
  
  <pre><code>Uncaught DOMException: Failed to execute 'removeChild' on 'Node': The node to be removed is not a child of this node.
  </code></pre>
  
  <p>Is using a <code>tbody</code> element <em>mandatory</em>? </p>
  
  <p>Why are browsers auto-inserting a <code>tbody</code> element? I checked on validator.w3.org and omitting a <code>tbody</code> tag seems valid HTML.</p>
  
  <p>How do I remove the row <strong>without using</strong> <code>HTMLTableElement.prototype.deleteRow(index)</code>, using only <code>HTMLElement.prototype</code> methods and properties?</p>