How to Dynamically Remove a Stylesheet from the Current Page

How to dynamically remove a stylesheet from the current page

Well, assuming you can target it with jQuery it should be just as simple as calling remove() on the element:

$('link[rel=stylesheet]').remove();

That will remove all external stylesheets on the page. If you know part of the url then you can remove just the one you're looking for:

$('link[rel=stylesheet][href~="foo.com"]').remove();

And in Javascript

this is an example of remove all with query selector and foreach array

Array.prototype.forEach.call(document.querySelectorAll('link[rel=stylesheet]'), function(element){
      try{
        element.parentNode.removeChild(element);
      }catch(err){}
    });

//or this is similar
var elements = document.querySelectorAll('link[rel=stylesheet]');
for(var i=0;i<elements.length;i++){
    elements[i].parentNode.removeChild(elements[i]);
}

adding and removing a stylesheet dynamcally

You need to disable it, removing the element does nothing. To select the element by the href value, you need to use a attribute selector.

$('link[href="css/customCss.css"]')[0].disabled=true;

and if you are going to be adding and "removing" it, you might want to check for it first and reenable it.

function loadCss(href) {    
    var sSheet = $('link[href="' + href + '"]');      
    if (sSheet .length) {
        sSheet[0].disabled = false;
    } else {
        var cssLink = $("<link rel='stylesheet' type='text/css' href='" + href + "'>");
        $("head").append(cssLink);
    }
}

---

Running Example:

function loadCSS(href) {  var sSheet = $('link[href="' + href + '"]');  if (sSheet.length) {    sSheet[0].disabled = false;  } else {    var cssLink = $("<link rel='stylesheet' type='text/css' href='" + href + "'>");    $("head").append(cssLink);  }}
function removeCSS(href) {  $('link[href="' + href + '"]')[0].disabled = true;}

$("button.add").on("click", function() {  loadCSS("http://cdn.sstatic.net/stackoverflow/all.css");});
$("button.remove").on("click", function() {  removeCSS("http://cdn.sstatic.net/stackoverflow/all.css");});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<h1>Hello</h1><div class="topbar">  <div class="icon-achievements">    <button class="add unread-count">Add</button>    <button class="remove unread-count">Remove</button>  </div></div>

Removing or replacing a stylesheet (a link) with JavaScript/jQuery

To cater for ie you have to set the stylesheet to be disabled as it keeps the css styles in memory so removing the element will not work, it can also cause it to crash in some instances if I remember correctly.

This also works for cross browser.

e.g

document.styleSheets[0].disabled = true;

//so in your case using jquery try

$('link[title=mystyle]')[0].disabled=true;

Dynamically delete a style from head tag with JQuery

You can add an ID to style attribute

 $("<style id='myStyle' type='text/css'> .HP{  background-color: \"Red \"} </style>").appendTo("head");

Then you can simply use ID selector with .remove() like

$('#myStyle').remove()

How to load/unload css dynamically

Hope this help you.

function injectCss(styles) {
  let styleSheet = document.createElement("style");
  styleSheet.type = 'text/css';
styleSheet.setAttribute("id", "dunamicstylesheet");
  styleSheet.innerText = styles;
  document.head.appendChild(styleSheet);
}

//Create-styleSheet
injectCss('dynamic.css');

//remove-styleSheet
var stylesheet = document.getElementById('dunamicstylesheet');
stylesheet.parentNode.removeChild(stylesheet);

Best way to dynamically add and remove style on elements

Definitely option 2. Styles should be defined in the stylesheet.

There's also toggleClass, which removes the class if it's there, but adds it if it's missing.

---

Note: toggleClass also lets you pass in a Boolean as the second argument, telling it whether to add or remove it (regardless of whether it currently has that class applied), so:

$(this).toggleClass('active', true);

is exactly equivalent to:

$(this).addClass('active');

This is very handy when you have a Boolean in your code already. So instead of this:

if (isUserActive()) {
    $(this).addClass('active');
} else {
    $(this).addClass('active');
}

You could just do this:

$(this).toggleClass('active', isUserActive());

How to dynamically remove all unwanted CSS and JS from page

Instead of worrying about tracking file names, why not just target anything that's not yours?

$('link').not('.myLink').remove();

And just make sure you drop that class on your link:

<link rel="stylesheet" href="path.css" class="myLink" />

Dynamically adding and removing CSS

I would recommend adding/removing CSS classes rather than manipulating CSS rules.

You can persist which class to be add along with <li> element using custom data-* prefixed attribute.

Then you can target the elements on which classes needs to added using .filter() method and :lt() selector.

Fiddle

$(document).ready(function() {  var password_li = $('#passwordStrength').find('li');  $('#password').bind('keyup', function() {    var counter = 0;    var pw = $(this).val();
    if (pw.length >= 8) {      counter++;    }    if (pw.match(/\d/)) { //match digit      counter++;    }    if (pw.match(/[A-Z]/) && pw.match(/[a-z]/)) { //match digit      counter++;    }    if (pw.match(/[$@$!%*#?&]/)) { //match digit      counter++;    }    //Get all classes to remove    var clssesToRemove = password_li.map(function() {      return $(this).data('matched-class');    }).get().join(' ');
    //Remove all class    password_li.removeClass(clssesToRemove);
    //Filter and add class    password_li.filter(':lt(' + counter + ')').each(function() {      $(this).addClass($(this).data('matched-class'));    });
  })})

ul#strength {  display: inline;  list-style: none;  padding: 0;  vertical-align: 2px;}
.point-reg {  background: #DDD;  border-radius: 2px;  display: inline-block;  height: 10px;  margin-right: 2px;  width: 30px;}
.first {  background-color: #e30613;}
.second {  background-color: #f9b233;}
.third {  background-color: #53ab58;}
.fourth {  background-color: #418746;}

<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/css/bootstrap.min.css" /><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="row">  <div class="col-xl-8 offset-xl-2">    <div class="form-group row">      <div class="col-md-12">        <input type="password" name="password" class="form-control pill-radius font-body" id="password" placeholder="Password">      </div>      <div class="form-group row">        <div class="col-md-12">          <ul id="passwordStrength">            <li class="point-reg" data-matched-class="first"></li>            <li class="point-reg" data-matched-class="second"></li>            <li class="point-reg" data-matched-class="third"></li>            <li class="point-reg" data-matched-class="fourth"></li>          </ul>        </div>      </div>    </div>  </div></div>

---

Related Topics