使用JS更改没有ID或类的内联CSS

Question

well I am trying to remove a add from this site anisp.gq put by the hosting provider ... its a practice site just for fun ...

The server on which the site is hosted puts this add on it after all the code and I have no access to this last bit of code on the admin-panel side :

<!-- Actual Website Code Above^^^ --> 
<!-- Last bit of add code that I want to remove ↓↓ -->

<div style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;">

    <a target="_blank" href="https://www.freewebhostingarea.com" title="Free Web Hosting with PHP5 or PHP7">

    <img alt="Free Web Hosting" src="https://www.freewebhostingarea.com/images/poweredby.png" style="border-width: 0px;" width="180" height="45">

    </a>
    </div>

Hence, I have no access to this last bit of code I decided to use JavaScript to get the inline display tag to change but due to there being no id or class present I am struggling ...

I have been trying to get the style tags display attribute to change to none in this div section ...

But as you can see there is no id and class tag there so

document.getElementById("myDIV").style.display = "none"; 

is out of question in my view ...

I have been trying you can say stupid stuff like this :

var node = document.querySelector('[style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"]').display="none";

/*and the below one */

 var node = document.querySelector('[style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"]');

document.getElementById("node").style.display ="none";

and some other stuff but nothing works and my lack of knowledge with DOM and JS is not helping either .... so I have no idea what I am doing is right wrong or what ... Please tell me whats the right approach ...

Thanks for Your Time

Answer 1

You could target the child <a> tag and then jump up to the parent.

var node = document.querySelector(
  'a[href="https://www.freewebhostingarea.com"]'
).parentNode;

node.style.display = 'none';

Answer 2

Both of your attempts almost works, there's just a small issue in both.
For the first one, you are missing style before display.

 var node = document.querySelector('[style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"]').style.display = "none"; 

 <div style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"> <a target="_blank" href="https://www.freewebhostingarea.com" title="Free Web Hosting with PHP5 or PHP7"> <img alt="Free Web Hosting" src="https://www.freewebhostingarea.com/images/poweredby.png" style="border-width: 0px;" width="180" height="45"> </a> </div> 

In the latter attempt you are not using the value that you assign to your node variable. Should be like this:

  var node = document.querySelector('[style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"]'); node.style.display = "none"; 

 <div style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"> <a target="_blank" href="https://www.freewebhostingarea.com" title="Free Web Hosting with PHP5 or PHP7"> <img alt="Free Web Hosting" src="https://www.freewebhostingarea.com/images/poweredby.png" style="border-width: 0px;" width="180" height="45"> </a> </div> 

Answer 3

If you want a non-javascript solution, this CSS will do.

div[style="text-align:right;position:fixed;bottom:3px;right:3px;width:100%;z-index:999999;cursor:pointer;line-height:0;display:block;"] {
  display: none !important;
}