how to use removeclass() function in Jquery to disable the CSS


Tags: javascript,jquery,html,css

Problem :

I would like to remove the styling(class="textinput") made for this div using Jquery. This textinput class is being used for other div as well, meaning to say i would only like to textinput functionality for the class readonly.

Lets have two scenarios: 1)

<div class="textinput boxshadow readonly">
<input id="id_lastname" class="boxshadowinset yellowbackground" type="text" maxlength="255" value="Language" name="lastname" readonly="readonly" title="This field is read-only">
</div>

2)

<div class="readonly">
<div class="textinput boxshadow">
<input id="id_lastname" class="boxshadowinset yellowbackground" type="text" maxlength="255" value="Language" name="lastname" readonly="readonly" title="This field is read-only">
</div>

I tried this:

$('div:readonly').removeclass('textinput');

It didn't work...

How different will the solutions be for the two scenarios?

Any suggestions on how to go about doing this? Need some guidance on solving this...



Solution :

The class qualifier is . and not :. Also as @Cupidvogel writes, it should be removeClass.

$('div.readonly').removeClass('textinput');

Edit

With the new requirement to handle nested cases too:

$('div.readonly, div.readonly div.textinput').removeClass('textinput');

This will match both readonly divs that have the textinput class and any divs with texinput class that are contained in a div with readonly class.


    CSS Howto..

    How to get button groups that span the full width of a parent in Bootstrap?

    why will my border not show?

    How to display text left side and icon on right side in html css?

    How to display “a” to full of the line

    How can I avoid div from executing new line if one line is already full?

    CSS background color show another color

    how to ensure that each time a css class name changes from the previous, it is applied a specific style

    Jquery Dropdownlist not shows the selected item.?

    How to flip an image horizontally halfway through an animation

    server-side control - how set background with css ? (link & hover)

    How to Center-Justify links in CSS?

    How to get Facebook Like Box “Dark Scheme” to work correctly? (Background is transparent.)

    how to make full css container

    How to use javascript/css to navigate through a pure css carousel/slideshow?

    How to set parent div height to self adapt to the inner div height?

    How to mask an SVG within a div?

    CSS how do I define the height between multiple label and textboxes elements

    How to center an iframe, responsive

    How to add contact details next to responsive Google Map

    How to center float list elements inside an unordered list

    Hide/show block with CSS

    How to include a css stylesheet in Orchard module?

    How to style checkbox using CSS?

    How can I switch overlapped elements with CSS transitions?

    CSS How to animate a transition from opacity 0 upon hover

    element doesn't show padding in Opera, Safari, IE

    How to cut divs both ways to keep the objects in center?

    How to selectively pass mouse events to underlying svg elements

    CSS - How do I get my list element to fill 100% of the block

    how to reduce the size of all component in sencha application