We Keep Coding

How to remove/change dynamically created CSS class in JavaScript

Background,
There are some elements where CSS animations needs to be applied. However these CSS needs to be generated on the fly as calculation needs to be done from JavaScript code.
This question clarifies how to dynamically add a CSS. Now the question is, how do I remove or replace a CSS generated following the accepted answer?
Just to be clear, it's nothing to do with removing a class from element. I need to remove it from the page so that animations will stop from elements with class. At some time later I can alter the CSS and re-register class so that associated elements are animated in different way.

document.getElementById('someElementId').className = '';

Edit.
You can remove it from the element's class list
document.getElementById("myelementsid").classList.remove("classname");

Here you are full documentation to do it with jQuery
https://api.jquery.com/removeclass/
with this, you can remove one or more classes

If you want to remove the specific style from the page you can do it like the following snippet:
$('link[title=stylesheettitle]').prop('disabled',true);
OR
$('link[title="stylesheettitle"]').remove();
Java Script
var style = document.getElementById('styleID');
style.parentNode.removeChild(style );

Avoid inline styling in jquery while appending elements dynamically?

I'm experimenting with jQuery and I made this fiddle. What it basically does is wherever you click, a div element is appended on the body to that clicked coordinates.
I've managed to do it but I would like to avoid the inline styling, i.e.;
this line : $('body').append('<div style="top:'+y+'px; left:'+x+'px;"></div>');
Is there any way I could do this with any jQuery methods where the CSS can be set for every particular div as soon as it is appended?

If it is to function as your fiddle does, stick with inline styles. To dynamically write CSS into a style tag in the dom for every element, while possible, would be hyper-wonky.
If you like it more jQuery like, you can write it like this:
$('<div/>').css({'top' :y, 'left':x}).appendTo('body');
but that essentially does the same thing you're already doing.
See it here

After appending all dynamic elements you can append a style tag directly to the head to avoid any inline style in your code.
E.g.:
$('head').append(
'<style type="text/css">' +
'div{ top: y; left: x}' +
'</style>'
);
You can also use style sheets for performance purposes. See: https://learn.jquery.com/performance/use-stylesheets-for-changing-css/

Remove block with Javascript without "hidden" css styles

I have a problem - I want to DELETE the div's rather than just hide them with css on my web page. I'm newbie in Javascript and I can not say for sure whether this is but I think that should be used function removeChild(). Here's the script:
http://jsbin.com/ufoyor/edit#javascript,html/
It works like this:
1) "X" button hide pronto and crossClose divs due to the fact-purpose style of "hidden" these blocks.
2) The script sets a specific value in a cookie if the value matched the block is not shown (with style = "visibility: hidden;").

Yes, you can remove the element together with its subtree with removeChild().
However, for I suggest setting style display: none. It won't display at all (won't occupy the space as visibility:hidden does).

In plain JavaScript use removeChild(): https://developer.mozilla.org/En/DOM/Node.removeChild
In jQuery you have method remove(): http://api.jquery.com/remove/

How to make style of an element dependent on another element's style

I need to set some special style for an element if some other element is visible (which is indicated by a special css class and can change dynamically). I need to do this because the page rendering and it's behavior is fully controlled by some framework's code and I don't want to change it. I can put any content anywhere in the body of the page. Is there a non-hacking way to do it?
My only idea was to use some plug-in like "watch" for jquery, but it's very ugly.

try using the properychange/attributemodified event
$("object-in-question").bind("DOMAttrModified propertychange", function(e) {
if($(this).is(":visible")).... etc
});
http://jsbin.com/abece4

Get values from original css file using jQuery

I am running in to this situation. Basically my site has many templates of css and users can change the color dynamically using jQuery. Now, the way I did it was to use jQuery to modify the css property directly by selecting the classes. However, if users switch to a different template (also dynamically), I insert .css file in but it has NO effect what so ever. The reason is the css change style=".." for each elements take precedent. How to fix this issue? I am thinking of 2 ways:
Delete the style="..." at each elememts. But how to do this?
Get the values directly from within .css file and assign to each elements again as style="..."
Anyone can show me some light on either one? Thanks.

If you just want to remove the style attribute from a group of elements you can use:
$('p').removeAttr('style');
Just replace 'p' with all the elements you want to remove the inline CSS from, e.g:
$('input, div, h1').removeAttr('style');
Hope this helps.

Before you switch out the style from the original using jQuery, why don't you assign the original style value to data on that element, and then restore it using that value.
So, for instance, say you're changing the css font-family of an element with class "foo":
To apply new css:
var orig = $(".foo").css('font-family');
$(".foo").data('origFont', orig);
$(".foo").css('font-family', 'Arial');
To revert the css:
var orig = $(".foo").data('origFont');
$(".foo").css('font-family', orig);

Get rid of all inline CSS using this regex in your editor:
style="[^"]*"

i just had the same problem, but i think the best solution is to use the jquery add and remove class.
each template should have a class, then to change it, use the remove class and add the desired class