Javascript - Add and Remove CSS file with one button

Question

I created a button that ADD CSS file to the page header. How Can I REMOVE this CSS from the header with the second click on the same button?

Thanks

<script>
$(document).ready(function(){
  $("#myButton").click(function(){
  var ls = document.createElement('link');
  ls.rel="stylesheet";
  ls.href="myCSSfile.css";
  document.getElementsByTagName('head')[0].appendChild(ls);
    });

});
</script>


<button id="myButton">Add / Remove</button>

Possible repeat - http://stackoverflow.com/questions/3182840/removing-or-replacing-a-stylesheet-a-link-with-javascript-jquery — Nirvik Baruah, Aug 07 '16 at 15:58

adeneo · Accepted Answer · 2020-10-07T00:25:53.977

5

Just add something to identify the style tag, an ID seems appropriate

$(document).ready(function(){
    $("#myButton").on('click', function(){

        if ( $('#myStyle').length === 0 ) { // does not yet exist

            $('<link />', {
                id   : 'myStyle',
                rel  : 'stylesheet',
                href : 'myCSSfile.css'
            }).appendTo('head');

        } else { // exists, remove it

            $('#myStyle').remove();

        }
    });
});

edited Oct 07 '20 at 00:25

answered Aug 07 '16 at 15:59

adeneo

312,895
29
395
388

Thanks! Works! My final code: – Ed Nez Aug 07 '16 at 16:14
1

I think this `href : 'myCSSfile.css';` line should not contain a terminator `;` – Tariqul Islam Aug 08 '20 at 22:27

Kiran Yallabandi · Answer 2 · 2016-08-07T16:19:38.063

In addition to the answer above you could also do this. This code helps you to identify the link tag on the basis of the css file you included, no need to specially identify the link tag using the id attribute :

<script>
$(document).ready(function(){
  $("#myButton").click(function(){


        if($("link[href*=myCSSfile]").length){
            $("link[href*=myCSSfile]").remove();
        }
        else{
            var ls = document.createElement('link');
            ls.rel="stylesheet";
            ls.href="myCSSfile.css";
            document.getElementsByTagName('head')[0].appendChild(ls);
        }
    });

});
</script>


<button id="myButton">Add / Remove</button>

Javascript - Add and Remove CSS file with one button

2 Answers2