Question

I have a span tag inside td of a table with specific style color:red. I want to find that span tag and hide it below is the code I have:

HTML :

<table class="table_1">
<tbody>
<tr>
<td>
<span id="dynamically generated" style="color:red;">
Error! correct it.
</span> 
</td>
<td>
<span>
// Three links to three different sites
<a>
</a>
<a>
</a>
<a>
</a>
</span>
</td>
</tr>
<tr>
</tr> 
</tbody>
</table>

EDIT the id of first span is dynamically generated like “Span1” “Span2″….

Jquery:

     $("table.table_1 tr").each(function (n) {
        $(this).find('td:eq(0)').find('span').html("");
    });

The above jquery code is hiding both the span tags even though they are in different td. Am i doing something wrong? i Just want to hide the first span tag which has error message in it. Is there a way?

Answer 1

Usually you would put a class on the tr or td (like ‘error’), then hide() it:

<span id="dynamically-generated" class="error">
Error! correct it.
</span>

...

$('table.table_1 .error').hide();

Hiding is much more elegant than calling html(”), because hide() won’t destroy the contents. So if you want to display the error later, just call show(). 🙂

Finally, you should put the red color in your CSS:

.error { color:red; }