Hiding empty span

Hiding empty span

I'm using the following css code which wrapped around a dynamically populated field;
<span class="ui-widget-header platform ui-corner-all"></span>

When the span is empty I want to hide it, and I've used this jquery to do this.
<script type="text/javascript">
jQuery(document).ready(function() {
$(".platform").each(function(){
if($.trim($(".platform").html()).length==0)
  $(".platform").remove();
  }
})
</script>

However, the ui-widget-header class appears to be stopping it from hiding - if I remove this class it hides fine.

Any suggestions?


Thanks!