Remove full css from div with Jquery

Question

Hello guys. In my css i have

    * {
 font-family: "Meiryo UI" , Verdana;
 font-size:13px;
 }
input, select, textarea {
 font-size: 12px;
 border-color: #333;
 color: #333;
 border-style: solid;
 border-width: 1px;
}

But, i want one DIV without CSS. I tried

$('#preview').removeClass()
$('#preview').removeAttr("style")
$('#preview').children().removeAttr/Class

But...but without result. Help me to remove all style from this div with Jquery or just some javascript.

He come from stylesheet. This is preview pic for my question: https://emailinvest.com/preview.jpg what i want.

Answer 1

Inheritance in CSS is more often helpful than not helpful, therefore take another route by either:

a) Override the styles you specified

#preview .input, #preview select, #preview textarea { }

or

b) Make the styles you specified target a different area using a prefixed selector, eg

#selector * { font: 13px "Meiryo UI", Verdana; }
#selector input, #selector select, #selector textarea { }

Answer 2

If you want to use removeClass you must specify what class to remove or it won't work:

$('#preview input').removeClass('classToRemove')

$('#preview button').removeClass('classToRemove')

You can check with Firebug what class is given to that button and try to remove it like that.

Or you can set your styles directly to that:

$('#preview button').css('background','#ccc');

Or this one.. but I'm not sure it works:

$('#preview').children().removeAttr('class'); // or 'style'

Answer 3

Your stylesheet does not specify classes or specific elements (IDs) and therefore the styles are being applied to all elements which match by tag.

Specifically, your button is being styled by the "input" element style specified in the stylesheet.

This means you do not have any classes you can easily remove to reset the style.

Buttons in particular are very difficult to set back to their original style once they have been set to something different, particularly in a cross-browser-friendly way.

You have a few options, of which only one is sensible:

1. As meder has suggested above don't set the style for this div in the first place. This is the best option. You can do this by either setting explicit class names or ids for your other divs and listing them in the stylesheet, OR add a class for the div you want to ignore, and use the "not" selector, eg input:not(.myUnstyledButtonClass) (this only works in modern browsers)
2. Manually construct your DIV inside an IFrame so it is not subject to the main document's styling. This seems like overkill though
3. I haven't tested this one, but you could try creating an iFrame, rendering a button (which would be of the unstyled form) and then iterate and recurse through and copy all properties and styles of the unstyled button to the button in your div. There's a very slim possibility this would work. I wouldn't even bother trying it however....

Go with 1 - what meder has suggested. It's probably worth posting up the code you have tried using when you commented to him that "I tried...no result". Chances are you've simply misinterpreted his suggestion or overlooked something.

For an example, see: http://jsbin.com/ikobe4

To use ":not()" you need to add unstyled (or whatever you choose) as a class on your button, eg:

<input type="button" class="unstyled" value="Button Text" />

And change the selector in the css file from

input, select, textarea {

to

input:not(.unstyled), select, textarea {

...but as mentioned, this wont work in all browsers, so your best bet is to add classes to all the other divs, and explicitly specify which divs you want to apply styles to, rather than specifying which you don't want to apply styles to