Working with a very poorly designed CMS/cart system that has inline-styles embedded everywhere, and I am able to mostly override things using CSS, but there are some things left with hard coded !important properties.

It's not my favorite method, but fortunately I can use JavaScript and .removeAttr() to clean up the mess. However, I am unable to get down into some deeply nested divs/spans.

$(document).ready(function() {
    $('#cartDiv').removeAttr('style');
});

The above works perfectly to remove all inline styles from #cartDiv but nothing below that is removed. I tried adding multiple lines, and even specifically target everything from #cartDiv using targeted selectors, but it didn't seem to work. I want to remove styles from #cartDiv AND all child elements below it.

Edit to add - Here is an exmaple of some of the existing code:

<div id="cartDiv" style="top: 0; right: 0; width: 180px; text-align: center; padding: 0 5px 5px; z-index: 10;">
    <div style="display:table; height:28px; text-align:right; width:100%;"> 
        <span style="vertical-align:middle; display:table-cell; color: #ccc; font-family: Arial; font-size: 12px !important;"> 
            <a href="javascript:ProceedToCheckout('no');" style="color: #fff !important; text-decoration:underline !important; font-family: Arial !important; font-size: 12px !important; font-weight: normal !important;">Check Out</a> &nbsp; | &nbsp; <a href="checkout/cart.php?1" style="color: #fff !important; text-decoration:underline !important; font-family: Arial !important; font-size: 12px !important; font-weight: normal !important;">View Cart</a> &nbsp;&nbsp;&nbsp; </span> 
        <span style="vertical-align:middle; display:table-cell; color: #ccc; font-family: Arial; font-size: 12px !important;"> <a href="#" onclick="ExpandCart();"><img border="0" width="16" height="11" src="https://siteimages.s3.amazonaws.com/btn-expand.png"></a> </span>
    </div>  
</div>

CodePudding user response：

To dynamically remove all style attributes from an element and all of its children and their children you can use the javascript querySelectorAll method with some css selectors. Here is an example using JavaScript rather than jQuery.

document.querySelectorAll('#cartDiv, #cartDiv *')
  .forEach((element) => element.removeAttribute('style');

CodePudding user response：

This might not be the quick fix you're looking for however i've dealt with this before and in the long run the best thing to do is migrate/refactor styling into a scss file or _files. For example changing something like this first h1 to the h2 and scss file

<h1 style='color:red !important'> this is bad> </h1> 

(change to ->) 
<div className='text-wrapper">
   <h2> this is good </h2>
</div>

SCSS FILE: 
.text-wrapper{
    h2{
        color: blue; 
        //could also add classname to the h2 html instead
    }
}

CodePudding user response：

You could do a recursive function, and I probably will. But in the mean time you could always

// original solution
$("#cartDiv, #cartDiv *").attr("style", null);

// recursive solution
function cleanStyle(elem) {
  elem.removeAttribute("style");
  [...elem.children].forEach(cleanStyle);
}
// cleanStyle(document.querySelector("#cartDiv"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<div id="cartDiv" style="padding:10px !important">
  <h1 style="background:blue !important">hello h1</h1>
  <div>
    <h2 style="color: red !important">?</h2>
    <h2 style="color: red !important">?</h2>
  </div>
</div>