Dynamically delete a style from head tag with JQuery

Question

I am dynamically creating a style like below and appending that to <head>

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

On the page I want to delete a particular css class and re-add with different value. How this can be done in JQuery.

Satpal · Accepted Answer

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()

Rohan Kumar · Answer

You can use css(), no need to alter your main stylesheet like,

$('.HP').css('color','red !important');

The above will make the font color red for all elements having HP Class

$('.HP').css('background-color','green !important');// change your bgcolor red to green

And to remove the last added style try this,

$('head style:last').remove();

Also, if you are adding multiple Styles dynamically, then to remove specific Style give a id to style tag and remove() it like,

$('#STYLE-ID-TO-BE-Removed').remove()

Donate For Us