How to hide div when containing a Google adsense advert?

Question

I have a div that contains an adsense ad. However I want to remove the div if a class is present.

<div id=bannerad>
 ... adsense ad ...
</div>

$(document).ready(function(){
    if ($('.back').is(":visible") == true)
       $( "#bannerad" ).remove();
});

What is the best way to achieve this. Would it be using jQuery via .remove() as using a display:none via css is against googles t+c's.

Thanks,

Answer 1

$('.back:visible').remove();

Using CSS display:none you can't remove it, you just hide it.

If you using $('.back:visible').hide()/$('.back:visible').css('display', 'none');

you can using $('.back:visible').show() to show it. But via .remove(), you can't show it again.

Answer 2

Don’t change the Google Adsense snippet!

According the Google Adsense terms of service it’s not allowed to manipulate their code snippet. It’s also not allowed to show ads through an IFRAME or to use JavaScript and Ajax to show or hide Adsense ads. But it’s allowed to exclude the whole Adsense snippet whenever you like. Another option is to use some ad server like DoubleClick for Publishers, DFP is a free Google service and I read somewhere that there is an option to filter ads for specific countries too.

Put div around Google ads like given below:

<div id="GoogleAds1">
<script type="text/javascript"><!--
google_ad_client = "pub-xxxxxxxxxxxxxx";
google_ad_host = "pub-xxxxxxxxxxxxxxx";
/* 300x250, created 1/31/10 */
google_ad_slot = "xxxxxxxxxx";
google_ad_width = 300;
google_ad_height = 250;
//-->
</script>
<script type="text/javascript">
src="http://pagead2.googlesyndication.com/pagead/show_ads.js"&gt;
</script>
</div>


<script type="text/javascript">

var Ads1 = document.getElementById('GoogleAds1');

Ads1.parentNode.removeChild(Ads1);

</script>

Add javaScript at the end of your post and your Google ads will be hide from that particular post.

So heres your all answers which you wanted to know

Answer 3

This article helped me. Basically it describe how you can use CSS code to hide div containing 'google-auto-placed' class from specific area of your website page.

For my particular wordpress website I was having auto ads getting placed by google script in website navigation link, which was very irritating. So I tried below piece of CSS code on my theme style sheet and it WORKED! atleast for me.

.ht-middle-header .google-auto-placed {
    display:none;
}

Article link: https://letstechready.com/2022/01/how-to-hide-google-ads-from-specific-area-of-your-website.html

Answer 4

Apparently it is allowed to use this code:

<style>
  .responsive-test { display: block;}
  @media(max-width: 480px) { .responsive-test { display: none; } }
</style>

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>
<!-- Resposive_TEST -->
<ins class="adsbygoogle responsive-test"
  data-ad-client="ca-pub-3086914080036003"
  data-ad-slot="1408862175"
  data-ad-format="auto"></ins>
<script>
(adsbygoogle = window.adsbygoogle || []).push({});
</script>

I posted more info in my topic: Remove adsense on mobile

Answer 5

Here you're mentioned that you want to remove the adsense add from your html(I want to remove the div is a class is present.).

Whereas using css you can't remove html elements, only it can be hidden using (display: none / visibility: hidden).

So it depends upon your wish, if you want to remove then you have to use js/jQuery otherwise simply hide using css.

Answer 6

So, if I correctly understood your question, you want to REMOVE it, right?

If so, then .remove() goes right. It completely removes an element so you never can restore it (until refresh, of course).

But using .hide() hides an element, like the display:none does it. In that case an element still exists, but not visible to user. I am not sure if Google can pay you for this kind of "ad views", but it definitely breaks their rules.

So, for deleting reasons your code sample is best. But it may not be reversed.

If you still want to show this content later, but also want to prevent it from appearing on the page, the solution I see for this is to save that div element to a variable, then remove element. Later you could restore it from the same variable. Like this:

$(document).ready(function(){
    if ($('.back').is(":visible") == true) {
        var bannerAd = $( "#bannerad" ).html();
        $( "#bannerad" ).remove();
    }

    function showAdContent(bannerAd) {
        $( "#bannerAd" ).text( bannerAd );
    }
});

Guess it works.

Answer 7

To hide an element and not necessarily remove it is more easily achieved. To do this, with your <div id="bannerad>you can mention it in your jquery like so:

document.ready(function(){ 
if ($('.back').css("display", "none") !== true){
$("#bannerad").css("display", "none"); }});