Question

I have a sharepoint site that is driving me crazy trying to remove all the junk code so I can apply my design. I am curious if jquery could strip out all css from all elements inside the containing div?

For example, how could I strip all css formatting from this html using jquery?

<div id="myID" > 
    <span class="myClass1">
        <span class="myClass2"></span> 
    </span> 
    <span class="myClass3">
        <ul class="myClass4" style="padding-left:100px;">
            <li>item</li>
        </ul>
    </span> 
</div>

Answer 1

Try this (updated for the last time demo) (thanks to Fabrício for the pointer):

$('#myID [style]').removeAttr('style');

This will strip any inline style attributes of only child nodes of <div id="myID">, and leave everything else intact (removing the classes on those nodes can have other effects besides styling). You could defined some CSS that only applies to the child nodes of <div id="myID"> like a CSS reset. That might look like this:

#myID * {
  border: thin red solid;
}