Удаление пустых строк из таблицы jQuery

Question

Я хочу удалить все пустые строки из моей таблицы, но каждый раз, когда я нажимаю кнопку, чтобы сделать это, заголовок таблицы также удаляется.

Как я могу это исправить?

Вот скрипку:

FIDDLE

Чтобы воспроизвести проблему, вам нужно сделать, это:

1. Нажмите Edit Properties.
2. Нажмите Add Row и добавьте пару свойств (убедитесь, что вы оставили одну строку полностью пустой).
3. Нажмите Save.
4. Нажмите Remove Empty Rows.

Answer 1

Проблема в том, что вы ищете td-метки в строке 3, и ваша голова не имеет тега td. Поэтому текст пуст, и он будет удален.

Answer 2

См http://jsfiddle.net/a8wLy18w/

Я добавил TBODY, так что вы можете отличить тело от заголовка

<table align="center" class="table table-bordered table-hover hide4" id="tab_properties"> 
     <thead> 
     <tr> 
      <th class="text-center col-lg-3"> Property </th> 
      <th class="text-center col-lg-4"> Value </th> 
      <th class="text-center col-lg-1"></th> 
     </tr> 
     </thead> 
     <tbody> 

     </tbody> 
    </table> 

Затем я изменил свое добавление и удаление использовать TBODY в JQuery

$('#click').on('click', function() { 
    $("#tab_properties tbody tr").each(function() { 
    var cell = $.trim($(this).find('td').text()); 
    if (cell.length == 0) { 
     console.log('empty'); 
     $(this).addClass('nodisplay'); 
    } 
    }); 
}); 

$('#add_property').unbind('click').click(function() { 
    $('#tab_properties tbody').append("<tr><td><input id=\"pn" + properties_id + "\" class=\"editable-input\"></td><td><input id=\"pv" + properties_id + "\" class=\"editable-input\"></td><td><div id=\"pr" + properties_id + "\" class=\"glyphicon glyphicon-remove remove_property\" type=\"button\" style=\"cursor:pointer\"></div></td></tr>"); 
    properties_id++; 
});