Programmatically removing CSS class files - jQuery - html

Question

I am using the jQueryUI library to take advantage of tabs on my page and the CSS styles of the tabs are being applied to the content within the div tags.
When I use the Chrome Developer tools I have narrowed it down to the following CSS classes in in the jquery-ui.css class:
.ui-widget {
/*font-family: Verdana,Arial,sans-serif;*/
font-size: 1.1em/*{fsDefault}*/;
}
.ui-widget .ui-widget {
font-size: 1em;
}
How do I remove these CSS styles from my div content containers. I tried the following jQuery snippet and it did not work.
$("#nameSearch").removeClass("ui-widget");
Here is a snippet of my HTML page:
<div id="searchTabs">
<ul>
<li>Name</li>
<li>Case Number</li>
</ul>
<div id="nameSearch">
<b>First Name:</b> <asp:TextBox ID="txtFirstNameSearch" runat="server" CssClass="txt" /><br />
<b>Last Name:</b> <asp:TextBox ID="txtLastNameSearch" runat="server" CssClass="txt" /><br />
<b>Date of Birth:</b> <asp:TextBox ID="txtDateOfBirth" runat="server" CssClass="txt" /><br />
</div>
<div id="caseNumberSearch">
<b>Case Number:</b> <asp:TextBox ID="txtCaseNumberSearch" runat="server" CssClass="txt" /><br />
</div>
</div>

Answer 1

If you know the position of those CSS rules, then:
IE
document.styleSheets[0].removeRule(i);
//i = position of the rule.
Other Browsers
document.styleSheets[0].deleteRule(i);