如何删除所有链接的样式表，但按ID保留一个？

Question

I need to remove all linked stylesheets in the head , while keeping one of them.

I want them all removed , except for the one with id=custom_stylesheet

<link type="text/css" href="" rel="stylesheet"></link>
<link type="text/css" href="" rel="stylesheet"></link>
<link type="text/css" href="" rel="stylesheet"></link>
<link id="skin_stylesheet" type="text/css" href="" rel="stylesheet"></link>
<link id="custom_stylesheet" type="text/css" href="" rel="stylesheet"></link>

This worked to remove them all , but how do i edit it to keep one ?

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

Answer 1

You can use :not or .not() :

$('link[rel=stylesheet]:not(#custom_stylesheet)').remove();
$('link[rel=stylesheet]').not('#custom_stylesheet').remove();

Answer 2

There is a document.styleSheets collection that contains all the style sheet for a document. The advantage is that it includes all style sheets, ie those added by link elements and style elements.

So iterate over that:

var sheet, sheets = document.styleSheets;

for (var i=0, iLen=sheets.length; i<iLen; i++) {
  sheet = sheets[i];

  if (sheet.id != 'custom_stylesheet') {
    sheet.parentNode.removeChild(sheet);
  }
}

I'm sure there's a jQuery–ised version that uses each , something like:

jQuery.each(document.styleSheets, function(i, sheet) {
  if (sheet.id != 'custom_sytleSheet') $(sheet).remove();

  // or much more efficient
  // if (sheet.id != 'custom_sytleSheet') sheet.parentNode.removeChild(sheet)
})

Answer 3

try

 $('link[rel=stylesheet]').filter(function(){
    return  this.id !="custom_stylesheet";
 }).remove();