css selector jquery problem

Question

I have the following code

$(function() {

  $('#totalRecords').css('visibility', 'hidden'); 
  alert("hi");

 });

Problem is that it doesnt hide my drop down which is

   <span id="lblCodes" class="pol" style="top:4;left:209;">Codes</span>
  <span id="totalRecords" class="pol" style="top:4;left:350;visibility:visible;">
  <select id="startRecord" >
   <option value="0"></option>
  </select>
  </span>  

Is there a method for parent() or something. I thought jquery would just select from id. I see alert("hi") prompt but the dropdown doesnt get hidden

thanks

Answer 1

did you not mean

  $('#startRecord').hide(); 

You seem to have the wrong id in your selector for the dropdown. Also, visibility and display are quite different. Unless you want the hidden dropdown to still occupy the space, you'll want to use display instead of visibility

Answer 2

I would say you should use the "display" attribute and set it to "none" to hide an element. So your code would be:

$('#totalRecord').css('display', 'none'); 

And it should be "totalRecord" instead of "totalRecords"

Answer 3

remove "visibility:visible" from style attribute and use $('#startRecord').hide();