Changing Inline CSS with no id or class with JS

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

Be aware that the user policy of using that (free) space may require that the advertisement is shown. — Arno Tenkink
– Arno Tenkink, Commented Mar 7, 2019 at 21:20
I don't care about that as soon as something concrete happens ... I will shift to a more robust hosting provider ... But I need to remove that add for now ... — Hemant Sarthak
– Hemant Sarthak, Commented Mar 8, 2019 at 5:55

James · Accepted Answer · 2019-03-08 13:25:59Z

2

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';

edited Mar 8, 2019 at 13:25

answered Mar 7, 2019 at 21:14

James

22.4k5 gold badges30 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Hemant Sarthak Over a year ago

Umm... I am new to JS can you please give detail to how I can edit the parent node after getting it ... I was thinking of using this approach (parentNode.style.display = "none";) is it correct ?

Arno Tenkink · Accepted Answer · 2019-03-07 21:18:58Z

0

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;
}

answered Mar 7, 2019 at 21:18

Arno Tenkink

1,5482 gold badges10 silver badges17 bronze badges

1 Comment

Hemant Sarthak Over a year ago

Not JS that I was trying to use and do .. But this one works thanks

Mathias W · Accepted Answer · 2019-03-07 21:23:55Z

0

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>

edited Mar 7, 2019 at 21:23

answered Mar 7, 2019 at 21:17

Mathias W

1,56113 silver badges16 bronze badges

1 Comment

Hemant Sarthak Over a year ago

Well none of them worked for me due to some unknown reason .... Sometimes the page just keeps on loading and loading but doesn't load fully ... but when I remove the scripts it works just fine ... I don't know why this happens ... any ideas ? The css one above works fine somehow though ...

Collectives™ on Stack Overflow

Changing Inline CSS with no id or class with JS

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related