title: Hide empty html table rows
body: <p><strong>Problem</strong></p>
  
  <p>I have a table with one or more empty rows. How to hide empty rows from the table? </p>
  
  <p>For example</p>
  
  <p>1 - John | Alfredo</p>
  
  <p>2 - Mark | Zuck</p>
  
  <p>3 -      |</p>
  
  <p>4 - Carl | Johnson</p>
  
  <p>In this case, I'd like to delete the third row.</p>
  
  <p><strong>Step Tried</strong></p>
  
  <p>I found how to delete a specific row, what about deleting all the empty rows? </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>deleteEmptyRows();
  
  function deleteEmptyRows() {
    var myTable = document.getElementById("myTable")
    var rowToDelete = 2;
    myTable.deleteRow(rowToDelete)
   
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;table border="1" cellspacing="1" cellpadding="1" id ="myTable"&gt;
    &lt;tbody&gt;
      &lt;tr&gt;
        &lt;td&gt;John&lt;/td&gt;
        &lt;td&gt;Alfredo&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Mark&lt;/td&gt;
        &lt;td&gt;Zuck&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;&lt;/td&gt;
        &lt;td&gt;&lt;/td&gt;
      &lt;/tr&gt;
      &lt;tr&gt;
        &lt;td&gt;Carl&lt;/td&gt;
        &lt;td&gt;Johnson&lt;/td&gt;
      &lt;/tr&gt;
    &lt;/tbody&gt;
  &lt;/table&gt;</code></pre>
  </div>
  </div>
  </p>