Use jQuery to hide an empty table

Question

We are using jQuery and Javascript to build a CV/resume from data. To help with the page breaks with these tables we are utilizing a jQuery plugin called Columnizer. It works pretty well, but we still have the occasional header that doesn't render properly at the end of a page.

Rather than try to fix the plugin, we really just need to hide the "empty" table which is really just a couple of header rows. It's proving difficult. Either I am not detecting the rows that need to be removed or the order of operations is off. It seems to me that it would be easiest to remove these rows as the very last operation. That doesn't seem to be happening though.

Here is the script we trying. It's at the very bottom of the HTML page.

<script>
    $(document).load(function () {
        var x = document.getElementsByTagName("table");

        //alert(x.length);  

        //alert(x[0]);

        for (var i = 0; i < x.length; i++) {
            alert(x[i].innerHTML);

            try {
                var childBody = x[i].getElementsByTagName("tbody");

                //alert(childBody[0].innerHTML);        

                var childRows = childBody[0].getElementsByTagName("tr");
            } catch (e) {
                //alert("no child rows");
                x[i].className = "hidden";
                            //$(x[i]).removeClass().addClass("hidden");
            }
        }
    });
</script>

I appreciate your help. If you need more info, please let me know. I am a novice at this!

Answer 1

This can be solved with :not(:has(*)) and .closest:

$('tbody:not(:has(*))').closest('table').hide();

DEMO