Question

I am having trouble deleting rules from the stylesheet object due to ever changing indexes.

I have this function:

function delete_styles(delete_array){

    console.log(delete_array); // ["0,0", "0,1", "0,2", "0,6", "0,7", "0,8", "0,9", "0,10", "0,14", "0,15", "0,16"]

    for(var i in delete_array){

        var pair = delete_array[i].split(',');
        var p1 = parseInt(pair[0]);
        var p2 = parseInt(pair[1]);

        document.styleSheets[p1].deleteRule(p2);

    }
}

However, as soon as I delete (0,0), the index (0,1) is invalid because it becomes (0,0)!

I can’t just use a counter and take a way an incrementing amount each time because there may be larger gaps in the CSS rules.

Any help on the logic here?

Answer 1

Consider starting from the end, instead of the beginning, and work your way down. That way, the there are no styles falling on the spot you just deleted.

Also, when using the array, do not use for in. use the usual for loop (or while) instead.

var i = delete_array.length;
while(i--){
    var pair = delete_array[i].split(',');
    var p1 = parseInt(pair[0]);
    var p2 = parseInt(pair[1]);

    document.styleSheets[p1].deleteRule(p2);
}