Remove empty cells and their label cells from a table

Question

I've got a two-row table (label row and data row) that gets filled in with all relevant information about a running service, however, about half of the cells are empty at any given time depending on which test is run.

I'm looking for a jquery statement that will find all empty cells and hide them along with the label for that cell. I've searched quite a bit and found this code that is meant to hide the empty cells

$('table#yourTable tr').each(function(){
  if($(this).children('td:empty').length === $(this).children('td').length){
    $(this).hide();
  }
});

However, my "empty" cells are populated with "&nbsp" and not truly empty. Is there a way to hide a cell and its associated label cell?

Answer 1

You can use .filter()

$(document).ready(function() {
  var elems = $("tr").filter(function() {
    return this.querySelector("td").innerHTML === " "
  });
  elems.hide();
})

Answer 2

following code will hide all of your not truly empty cell and it's label cell.

$(function () {
    var $label = $('tr:first');
    $('tr:last td').each(function (index, td) {
        var $td = $(td);
        if ($td.html() != ' ') return;

        $td.hide();
        $label.find('td:eq(' + index + ')').hide();
    });
});