How do I remove a #idname .classname { } inside a style tag using jquery?

Question

Not really sure how to word it but here is the CSS code I'm working with.

 <style> #st_advanced_menu_wrap .m_alignment_0 .advanced_style_wide, #st_advanced_menu_wrap .m_alignment_3 .advanced_style_wide { left:0; } </style> 

How do I go about calling the whole thing using the jquery $('.className').removeClass('className'); when the piece of style code is using more than one ID AND Class? How do I reference all of that within the '.className' part of the jquery code? I want to remove this piece of code from a document that cannot be modified or edited internally. I can only add on to the existing code. I'm pretty new to how jquery works. Thanks!

Answer 1

Here is a simple way to add and remove classes & ID's with jQuery

 $('.addColor').on("click", function(){ $('.box').addClass("blue") }) $('.removeColor').on("click", function(){ $('.box').removeClass("blue") }) $('.addId').click(function(e){ $(".box").attr("id", "yellow"); }); $('.removeID').click(function(e){ $('.box').removeAttr('id'); }); 

 .box { display: block; width: 100px; height: 100px; background-color: red; } .blue { background-color: blue; } #yellow { background-color: yellow; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="box"></div> <br /> <button class="addColor">Click to add class</button> <br /><br /> <button class="removeColor">Click remove class</button> <br /><br /> <button class="addId">Click add an ID (yellow)</button> <br /><br /> <button class="removeID">Click remove an ID</button> 

JSFiddle example

Answer 2

You can insert another <style> element into the page overriding the values of the previous one.

Although not best practice, you can use the !important flag to ensure your rules take preference

var myStyle = '\
    #st_advanced_menu_wrap .m_alignment_0 .advanced_style_wide,\
    #st_advanced_menu_wrap .m_alignment_3 .advanced_style_wide { \
        left:auto!important;\
    }';
$('body').append($('<style>'+myStyle+'</style>'));

The backslashes \\ are only used to increase code readability

Otherwise you can change the elements class from .advanced_style_wide to something else, or remove the class using jQuery's .removeClass('.advanced_style_wide') which should stop the rules from your question effecting it