Question

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…

Answer 1

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.