CODEWITHSUNDEEP
javascriptjquerycsshtml
Ekim
Ekim

Reputation: 1105

using jQuery, how can I remove a dynamically added class to the head of a page

I use an inline editor to edit css classes, when a change is made I wish to remove the class definition and add it again, also user has option to delete the element using it so I need to delete the definition.

Adding works using this code:

$("<style>").prop("type", "text/css").html( "#my_element_"+MaxElements+" {"+ xCSSCode +"}").appendTo("head");

however I can't seem to remove this class which is inserted into the head of the page as follows:

<style type="text/css">#my_element_1 {border-radius: 12.5px;
...
}</style>

Upvotes: 6

Views: 2759

Answers (3)

Peter Scott
Peter Scott

Reputation: 1316

 $('#my_element').removeClass('hidden');
 // also
 $('#my_element').addClass('hidden');

Upvotes: 0

Blender
Blender

Reputation: 298326

I would store the elements in an object:

var styles = {};

...

styles[some_identifier] = $("<style>", {
    type: "text/css",
    html: "#my_element_"+MaxElements+" {"+ xCSSCode +"}"
}).appendTo("head");

You can remove the style tag easily:

styles[some_identifier].remove();

Upvotes: 2

adeneo
adeneo

Reputation: 318262

create a style tag:

var style = $("<style />", {
                id  : 'myStyleTag',
                type: 'text/css',
                html: "#my_element_"+MaxElements+" {"+ xCSSCode +"}"
}).appendTo("head");

to remove 

style.remove();
// or
$('#myStyleTag').remove();

Upvotes: 10

Related Questions