CODEWITHSUNDEEP
javascripthtmlcss
meecoder
meecoder

Reputation: 156

Overriding/removing inline !important

I have a site using htmlcommentbox.com's comment system. It seems to use inline !importants to make a link to the site stay there. This is the code I'm using from them:

<!-- begin htmlcommentbox.com --> <div id="HCB_comment_box">Loading comments...</div> <link rel="stylesheet" type="text/css" href="htmlcommentbox.css" /> <script type="text/javascript" id="hcb"> /*<!--*/ if(!window.hcb_user){hcb_user={};} (function(){var s=document.createElement("script"), l=(hcb_user.PAGE || ""+window.location), h="//www.htmlcommentbox.com";s.setAttribute("type","text/javascript");s.setAttribute("src", h+"/jread?page="+encodeURIComponent(l).replace("+","%2B")+"&mod=%241%24wq1rdBcg%247.bGleVasiPPOiHF49trb0"+"&opts=342&num=10");if (typeof s!="undefined") document.getElementsByTagName("head")[0].appendChild(s);})(); /*-->*/ </script> <!-- end htmlcommentbox.com -->

My CSS is:

body {
    background-color: #000;
}
p {
    color: #FFF;
}
a {
    color: #FFF;
}
span,
div a {
    display: none !important;
}

I will include more if necessary. Can I remove the link to their site?

Upvotes: 3

Views: 891

Answers (2)

Pascal Ockert
Pascal Ockert

Reputation: 984

I'd suggest to remove the link from the DOM after the script has been executed, then you do not need to remove or override the !important:

document.getElementById('HCB_comment_box').addEventListener('DOMSubtreeModified', function () {
    var desc = document.querySelector('#HCB_comment_box .home-desc');
    var link = document.querySelector('#HCB_comment_box .home-desc').nextSibling;
    var parent = desc.parentNode;
    parent.removeChild(desc);
    parent.removeChild(link);
});

Fiddle

Upvotes: 0

Josh Crozier
Josh Crozier

Reputation: 241198

You could simply select the element and remove the style attribute:

document.querySelector('.home-desc + a').removeAttribute('style');

..then you can use the following CSS to hide it:

.home-desc + a,
.home-desc {
    display: none;
}

Example Here

Alternatively, since all you are doing is hiding the elements, you could just remove them entirely.

You could also avoid JS completely and set the opacity to 0 and add pointer-events: none. This will essentially hide the element(s).

.home-desc + a,
.home-desc {
    opacity: 0;
    pointer-events: none;
}

Example demonstrating this.

Upvotes: 4

Related Questions