I got a line on the top of the page,
<link rel="stylesheet" href="style/style.css">
How do I remove it by jQuery or javascript?
Tired this way,but not working
$(link['style/style.css']).remove();
4 Answers
jQuery selection by attribute is in this format:
$('link[href="style/style.css"]');
Then you need to disable it:
// prop() suggestion from @jahroy
$('link[href="style/style.css"]').prop("disabled", true);
5 Comments
SomeShinyObject
Slow down the downvote train. This is the correct way to do it. Selection by attribute is in the format I have given. Check the docs.
jahroy
Shouldn't you use jQuery.prop() [in stead of attr()] to disable the link? By the way, I did not downvote. From the docs: "The .prop() method should be used to set disabled and checked instead of the .attr() method. The .val() method should be used for getting and setting value."
SomeShinyObject
@jahroy, that would be better, huh? I fixed it. Thanks for the reminder.
Stiger
why don't remove it by $('link[href="style/style.css"]').remove()?
SomeShinyObject
@Stiger, apparently it doesn't work that way from what I have read.
remove() takes away the element but that stylesheet information is still there.In most modern browsers you can iterate through the list of stylesheets and disable the ones you want:
var toRemove = 'style/style.css';
[].forEach.call(document.styleSheets, function(styleSheet) {
if (styleSheet.href && styleSheet.href.substr(-toRemove.length) === toRemove) {
styleSheet.disabled = true;
}
});
Comments
This is not a direct answer to your question but it may be a better way to achieve what you are trying to do:
If you are controlling the stylesheet and you want an easy way to turn it on and off then you may consider using the same trick that is used by Modernizr. Instead of having in your stylesheet:
.some-class { color: red }
and then removing the entire stylesheet it in some cases, you can have:
.style-x .some-class { color: red }
and then in your HTML or JavaScript you can add "style-x" class to the body tag:
<body class="style-x">
[...]
<div class="some-class">red text</div>
[...]
</body>
Removing the style in JavaScript is just removing the class style-x from the body tag, using .className in plain JavaScript or .removeClass() in jQuery.
That way you can have many "styles" in one concatenated and minified CSS file that can be activated and deactivated independently.
Comments
This javascript snippet works
how to remove css rel by javascript or jQuery
document.styleSheets[0].disabled = true;
1 Comment
Ja͢ck
That will disable the first, not necessarily the one you want.
$('link[href$="/style.css"]')