[FIXED] How do I hide a div containing an entire table if table only has 1 row?

Issue

Fairly new to JS and html. I tried using this function and I'm not seeing results. Would appreciate some help. Here is the JS code and the html div and table where it would be used.

    function emptyTableRedisplay(table, uRowsMin)
    {
        if (! table || ! table.rows || table.rows.length >= uRowsMin)
            return;

        let styleHide = table.getAttribute("data-hide-style");
        if (! styleHide || styleHide === "")
            return;

        let idAlt = table.getAttribute("data-alt-id");
        if (! idAlt || idAlt === "")
            return;

        # find the enclosing div
        let el = table.parentNode;
        while (el && el.tagName.toLowerCase() == "div")
            el = el.parentNode;
        if (! el)
            return;

        var alt = el.parentNode.parentNode.getElementById(idAlt);
        if (! alt)
            return;

        el.classList.add(styleHide);
        alt.classList.remove(styleHide);
    }

In the html, this is what I did

<div id='emptyTableRedisplay'>                  
<h3>Header</h3>
<p>Notes</p>
<table class='data-table monetary' data-final-rows-to-not-sort='0' data-hide-style='1' data-alt-id='2'>
<tbody>
<tr>
<th class='sortable-col' data-collation-form='0-9'>Box #</th>
<th class='sortable-col'>Box Name</th>
<th class='sortable-col' data-collation-form='0-9'>Reported</th>
</tr>
</tbody>
</table>

Solution

You can check if table row length is equal to 1, if so then you hide the div

const emptyTableRedisplay = document.getElementById("emptyTableRedisplay");
const tableRows =  document.querySelectorAll("#emptyTableRedisplay tr");
if (tableRows.length === 1) {
  // uncomment the line below
  // emptyTableRedisplay.style.display = "none";

  //Just for demo
  emptyTableRedisplay.style.backgroundColor = "lightblue"
}

<div id="emptyTableRedisplay">
  <h3>Header</h3>
  <p>Notes</p>
  <table class="data-table monetary" data-final-rows-to-not-sort="0" data-hide-style="1" data-alt-id="2">
    <tbody>
      <tr>
        <th class="sortable-col" data-collation-form="0-9">Box #</th>
        <th class="sortable-col">Box Name</th>
        <th class="sortable-col" data-collation-form="0-9">Reported</th>
      </tr>

    </tbody>
  </table>
</div>

Answered By - dippas

Answer Checked By - Terry (PHPFixing Volunteer)