DOM inspector vs Browser Console

[tjsreedhar]

Mike Pharma recently launched its new landing page to host a crowd funding campaign . The page uses an external library to display third party ads . Once the page is loaded fully , it creates more than 50 new html items placed randomly inside the DOM like the one below .

<div class="ad-lib-hidden" onload ="myFunction">
<img src ="/ad-lib/ad01.gif"/>
</div>

All the elements include the same ad-lib-hidden class which are hidden by default ,but randonly displayed while user navigates through page .

what can developer do temporarily and quickly remove them and which one below is the best option?

1. Use DOM inspector to prevent the load event to be fired ?
2. Use Browser Console to execute script that prevent the load event to be fired ?
3. Use DOM inspector to remove all elements containing the class ad-lib-hidden ?
4. Use Browser Console to execute script that remove all elements containing the class ad-l

[rpg_digital]

I don’t know if this is what you are after, but with uBlock you can go to settings → filters and add
##.ad-lib-hidden

Edit: As Paul pointed out, this is homework and not in the options.

[Paul_Wilkins]

But that’s not a valid answer to his question. This homework question only allows answers from 1 through to 4.

The only answer from me as a developer, is to remove the external library that displays the third party ads.

[tjsreedhar]

Can it be done via the DOM inspector since fix should be only temporary or we should go for display : none in Browser console ?

[Paul_Wilkins]

Why should it only be temporary? Then you have to do it every time that you visit the page.

It’s much better to “one and done” the situation and use something like uBlock Origin (which I personally use) to remove the advertising once, for this visit and all future visits.

For example, using the picker, you can select elements on the page to remove them, such as this community ad.

Whenever you come back to anywhere on that domain, the same elements are hidden too, regardless of which new advert is showing in the advert area.

[rpg_digital]

@Paul_Wilkins

But that’s not a valid answer to his question. This homework question only allows answers from 1 through to 4.

I’m confused.

@Paul_Wilkins

It’s much better to “one and done” the situation and use something like uBlock Origin (which I personally use) to remove the advertising once, for this visit and all future visits.

Surely my earlier post is along the same lines? Maybe I’m missing something.

I don’t know if this is what you are after, but with uBlock you can go to settings → filters and add
##.ad-lib-hidden

[Paul_Wilkins]

@rpg_digital

Surely my earlier post is along the same lines? Maybe I’m missing something.

I’m in agreement with you there. Even though the homework answers have one answer that’s more suitable than all the rest, it’s important not to be blinded to other better solutions that haven’t yet been presented.

[m3g4p0p]

@tjsreedhar

Can it be done via the DOM inspector since fix should be only temporary or we should go for display : none in Browser console ?

Hi @tjsreedhar, the DOM inspector could be used but that would be rather cumbersome – you’d have to search for class="ad-lib-hidden" or something, then right-click each matched element and select “delete element”.

As for preventing the load event to be fired, not sure if this is even possible but that would also affect “righteous” load event listeners. Also, you’d have to be rather quick.

So I’d go with using the browser console to remove the unwanted elements… as a one-liner:

document.querySelectorAll('.ad-lib-hidden').forEach(el => el.remove())

@Paul_Wilkins

The only answer from me as a developer, is to remove the external library that displays the third party ads.

Haha yeah well if that’s an option: find the annoying script in the network panel, right-click and select “block request URL”. :-)