0
<html>
<head>
  <style>
   .containerTitle {
     background-color:silver;
     text-align:center;
     font-family:'Segoe UI';
     font-size:18px;
     font-weight:bold;
     height:30px;
   }
  </style>
</head>
<body>
<div id="a"/>
</body>
</html>

How do I remove the styles applied to .containerTitle using jQuery?

Akshay
  • 14,138
  • 5
  • 46
  • 70
Akbar Basha
  • 1,168
  • 1
  • 16
  • 38
  • You can't, it's a CSS rule, not an element on your page. – Broxzier Apr 28 '15 at 14:27
  • But you can remove that class form the elements it is applied to. – techfoobar Apr 28 '15 at 14:28
  • why do you want to remove .containerTitle style? – Islam Zedan Apr 28 '15 at 14:28
  • because i will append that style dynamically based on input – Akbar Basha Apr 28 '15 at 14:29
  • http://stackoverflow.com/a/19627767/4028085 – brso05 Apr 28 '15 at 14:29
  • CSS is not part of the DOM, since it only affect the design. This cause the JavaScript not to be able to alter Style Sheet itself, but the design attributes. If you want to remove this CSS property, your logic is not good and you should renew it. – Anwar Apr 28 '15 at 14:30
  • 5
    @Broxzier: *"You can't..."* [Yes, you can](http://www.w3.org/TR/DOM-Level-2-Style/css.html#CSS-CSSStyleSheet-deleteRule). – T.J. Crowder Apr 28 '15 at 14:30
  • @T.J.Crowder That's using regular JavaScript though, not jQuery, and OP states he wants to do it with jQuery. – Broxzier Apr 28 '15 at 14:34
  • 1
    @Broxzier: Splitting hairs, people frequently think they need jQuery for things they don't need jQuery for. And playing devil's advocate, you *could* use jQuery for parts of it (like looping through the list of stylesheets and list of rules). :-) (And pro forma: jQuery ***is*** regular JavaScript. Unless you're using CoffeeScript or TypeScript or Dart with it...) – T.J. Crowder Apr 28 '15 at 14:37

3 Answers3

5

A couple of options:

If you can remove the entire stylesheet (by removing the style or link element), that will remove all rules defined by that stylesheet.

Live Example:

$("input").on("click", function() {
  $("style").remove(); // Your selector would be more specific, presumably
});
.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">red</div>
<div class="green">green</div>
<div class="blue">blue</div>
<input type="button" value="Click to remove the stylesheet">

Alternately, if you need to just remove one rule, you can, but it's a pain: You look through the styleSheets collection to find the stylesheet object for it, then find the relevant rule in the style sheet's cssRules list (called just rules on older IE), probably by looking at each CSSStyleRule's selectorText property, then call deleteRule to delete it.

// Loop through the stylesheets...
$.each(document.styleSheets, function(_, sheet) {
  // Loop through the rules...
  var keepGoing = true;
  $.each(sheet.cssRules || sheet.rules, function(index, rule) {
    // Is this the rule we want to delete?
    if (rule.selectorText === ".containerTitle") {
      // Yes, do it and stop looping
      sheet.deleteRule(index);
      return keepGoing = false;
    }
  });
  return keepGoing;
});

Live Example (see comments):

$("input").on("click", function() {
  // Loop through the stylesheets...
  $.each(document.styleSheets, function(_, sheet) {
    // Loop through the rules...
    var keepGoing = true;
    $.each(sheet.cssRules || sheet.rules, function(index, rule) {
      // Is this the rule we want to delete?
      if (rule.selectorText === ".green") {
        // Yes, do it and stop looping
        sheet.deleteRule(index);
        return keepGoing = false;
      }
    });
    return keepGoing;
  });
});
.red {
  color: red;
}
.green {
  color: green;
}
.blue {
  color: blue;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div class="red">red</div>
<div class="green">green</div>
<div class="blue">blue</div>
<input type="button" value="Click to remove the green rule">
T.J. Crowder
  • 1,031,962
  • 187
  • 1,923
  • 1,875
0

Personally if I was going to do something like this, I might put my css in a body element that can be easily replaced/removed. http://jsfiddle.net/oqno5643/ Changed to set with html() rather than append() to remove previous values: http://jsfiddle.net/oqno5643/1/

HTML

<div id="test">Test text</div>
<input type="button" id="changer" value="Change to Blue">
<span id="styleContainer"></span>

Javascript

$(document).ready(function(){
    $('#styleContainer').html('<style>#test{ color: red; }</style>');

    $('#changer').on('click', function() {
        $('#styleContainer').html('<style>#test{ color: blue; }</style>');
    });
});

Sorry, meant to do the html() instead of append() but forgot in my quick demo.

Taplar
  • 24,788
  • 4
  • 22
  • 35
-3

You can't remove the style itself but you can remove it from any element it applies to.

$('.containerTitle').removeClass('containerTitle');

Jack
  • 8,851
  • 3
  • 21
  • 26
  • 1
    How this question is so controversial I'll never know. Poor guy probably inherited this code, didn't word his question properly, and just needs some help. – Jack Apr 28 '15 at 14:36