jQuery question - remove a class and hide an element

jQuery question - remove a class and hide an element

Hello Everyone: 

I am doing an exercise to practice jquery's removeClass method and hide an element. 
The code doesn't function as expected 1)to remove the class from the html table element
2)it doesn't hide the paragraph text which read ' the legal statement of our website.'

Please give me some suggestion on how to make the code work, so I can understand what have done wrong. Thanks!

  1. Code in external style sheet: 
  2. .zebra
  3. {
  4.  background-color: #ddd;
  5.  color: #0000ff;
  6. }                                                                                                                                                
Code in the html file
  1. <html>
  2.  <head>
  3.   <title>hello world</title>
  4.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  5.   <link rel="stylesheet" href="stylesheet1.css" type="text/css" />
  6.   
  7.   <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" ></script>
  8.  <script language="JavaScript" type="text/javascript">
  9.   <!--
  10.   $('#celebs td.zebra').removeClass('zebra');
  11.   $('#hideButton').click(function()
  12.   {
  13.     $('#disclaimer').hide();
  14.   });
  15.   //-->
  16.  </script>
  17. </head>

  18. <body>
  19.   <table class="data" id="celebs">
  20.    
  21.      <tr>
  22.      <td>ID</td>
  23.      <td class="zebra">NAME</td>
  24.      <td>OCCUPATION</td>
  25.      <td class="zebra">Approx. Location</td>
  26.      <td>Price</td>
  27.      </tr>
  28.    </table>
  29.    <p id="disclaimer">the legal statement of our website.</p>
  30.    <input type="button" id="hideButton" value="hide" />
  31. </body>
  32. </html>