Remove powered by in iframe widget - display none and css not work

Question

I have a website and added a chat widget but want to display none on some part of this widget/iframe. The widget is loaded in an iframe with .js file and HTML trigger.

I can in Chrome Developer Tools use this code to get away the things I want but I can not get this to work on the live site.

.ember-view .footer-note {
    display: none!important;
}

HERE IS CODE I WANT TO DISPLAY NONE

<div id="ember123" class="ember-view footer-note">⚡ by <a href="https://somelink.com/" class="product" target="_blank">the link</a>
</div>

How do I do to load my CSS code after maby 5 secounds after all page have been loaded?

I have tested this but doesn't work:

$(window).load(function() {
$('head').append('<link rel="stylesheet" type="text/css" href="//www.linktoCSSwhereDisplayNoneIs.se/css/style.css">');
});

$('iframe').contents().find("div[comp='ember*']").remove();

And the css

*[id^='ember-']{
display: none!important;
}
div[class^="ember"], div[class*=" ember"] {
    color:red 
}
.ember-view .footer-note {
    display: none!important;
}

Answer 1

Probably we can try appending the style after the iframe has loaded.

$("#iframe-id").on("load", function () {
    $('head').append('<link rel="stylesheet" type="text/css" href="//www.linktoCSSwhereDisplayNoneIs.se/css/style.css">');
});