Trying To Override A Dynamically Generated Inline Style

I'm trying to quickly fix something that is broken on a wordpress site. The problem is that someone else created the soup sandwhich and I'm stuck fixing it. I have an element tha

Solution 1:

You can do it with CSS:

#whats-new-post-in-box > .audio_controls.fresh {
    display: none !important;
}

An !important style rule can override an inline style rule (unless the inline style rule is also !important).

Alternately, with JavaScript on any modern browser:

var list = document.querySelectorAll("#whats-new-post-in-box .audio_controls.fresh");
var n;
for (n = 0; n < list.length; ++n) {
    list[n].style.display = "none";
}

For older browsers it's more of a pain:

var elm = document.getElementById("whats-new-post-in-box").firstChild;
while (elm) {
    if (elm.className &&
        elm.className.match(/\baudio_controls\b/) &&
        elm.className.match(/\bfresh\b/)) {

        elm.style.display = "none";
    }
    elm = elm.nextSibling;
}

Obviously, for the two JS solutions, you need to run that code after whatever it is that's setting the style in the first place...

Solution 2:

Pretty sure you can write a CSS rule for #whats-new-post-in-box .audio_controls and mark it with !important.

Solution 3:

Another way to hide the inner div, and this requires jQuery:

$('div.audio_controls', $('#whats-new-post-in-box')).hide();

This code select all div elements with an audio_controls class that are inside the element with an id of whats-new-post-in-box, and hides them.