Delete <TR> conditionally

Question

I'm creating a the first row of a table to display header text that will give meaning to a group of rows below it.

Upcoming Events

then looping thru the model to build a table listing of those upcoming events. But there may be client-side conditions that result in no rows being rendered which negates the need for the header row.

How can I reach back from the end of my 'Upcoming Events Iterator' and delete the first row (id="HeadRow")?

Answer 1

$("tr#HeadRow").remove(); 
// Removes <tr id='HeadRow'><td>foo</td>...</tr> from DOM

Answer 2

If you make sure that you close the row so it's valid html, you can do this:

$("#headrow").remove()

Answer 3

If you don't need a header row, then you probably don't need the table, so why not just hide the entire table?

$("table").hide();

Then, later, if there is something to show, then you don't have to rebuild the header row, you can just update the table and make it visible.

Answer 4

Rather than define your header row statically, I'd output it dynamically along with the rest of the table rows. Like this, in pseudocode:

int numThings = 0;
for each (thing in dataModel) {
    if (thing.wantToDisplay()) {
       if (++numThings == 1) {
           outputHeaderRow();
       }
       outputThing(thing);
    }
}

By the way, you should probably be using <th> rather than <td>.

Answer 5

I would take James Black's approach and hide the whole table if no rows exist rather then just removing the header row.

You can run a quick check after everything has fired to load the rows and hide the table if only the header row exists:

if ($("#myTable tr").length == 1) {
  $("#myTable").hide();
}

Answer 6

Typically what I will do is leave the header row but insert a row with a nice, descriptive message indicating that there was nothing to show.

<table>
<thead>
   <tr><th>....</th></tr>
<thead>
<tbody>
   <% if (Model.Results.Count() > 0) {
         foreach (var model in Model.Results) { %>
           <tr>
             <td><%= Html.Encode( model.Name ) %></td>
             ...
           </tr>
   <%    }
      }
      else {  %>
           <tr><td colspan="N">Query returned no results.</td></tr>
   <% } %>
</tbody>
<tfoot>
  ...
</tfoot>
</table>