Javascript CSS deleteRule property

Question

Hey I'm trying to figure out why deleteRule isn't working for my css object in javascript. I made a very simple test to illustrate. http://codepen.io/wzsun/pen/uzcvI

console.log(cssRule.cssRules.length); <-- returns 2
cssRule.deleteRule(1); // <-- can't delete
cssRule.insertRule("to { -webkit-transform: rotatex(360deg); background-color:blue;}") // <-- this works
console.log(cssRule.cssRules.length); <-- returns 3
console.log(cssRule);
cssRule.deleteRule(2);

I can insert a rule but I can't delete one. Thanks for any help.

Answer 1

I have got intrested by the problem you shown and I think I found the answer. If you want to call removeRule you have to remove rule by attribute DOMString key

void            deleteRule(in DOMString key);

and its value between 0 and 1 (for example 0%, 50%, 100%). Thats why index passed didnt worked.

CSSKeyframe.keyText Represents the key of the keyframe, like '10%', '75%'. The from keyword maps to '0%' and the to keyword maps to '100%'

CSSKeyframesRule MDN.

What you have to do is to find a keyText ( msdn, mdn ) and then simply use it to deleteRule()

keyToRemove = cssRule.cssRules[1].keyText;
console.log(cssRule);
console.log(cssRule.cssRules.length);
cssRule.deleteRule(keyToRemove);

Here is an example.