Do not load the Division if using JS [closed]

I am trying NOT to load the Division using JS, but it loads and then remove the content.
I do not want it, tried remove() and hide() both working like hiding it after loading.

$(document).ready(function() {
  if ($(window).width() <= 700) {
    $('.desktop-only').remove();
  } else {
    $('.mobile-only').remove();
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="desktop-only">
  <a class="GAds" href="https://ads.google.com">
    <img height="80" width="80" class="img-ads" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
    <div class="ads">
      Mobile Google Ads
    </div>
  </a>
</div>
<div class="mobile-only">
  <a class="GAds" href="https://ads.google.com">
    <img height="80" width="80" class="img-ads" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
    <div class="ads">
      Desktop Google Ads
    </div>
  </a>
</div>

Answer

In order to .remove() an object it first needs to be loaded into the DOM and recognizable. Elements are viewable as the page is loading. However, $(document).ready() never fires until the page is done loading. Hence why you can see both for a few seconds before the page is done loading. You have two main options here:

Option 1

The first one is to set both of the ads to be hidden style="display: hidden;" and then remove the hidden tag once the page is loaded: $('.class').css('display','');.

Option 2

Or, since both “ad types” only have one single element which is different between the two. You can have one, empty, element loaded in and append the data you want to it once the page loads. This one takes a bit more work.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="ad-container">
</div>

JS

$(document).ready(function() {
  var adTypeName = "";
  if ($(window).width() <= 700) {
    adTypeName = "Desktop Google Ads";
  } else {
    adTypeName = "Mobile Google Ads";
  }
  $('.ad-container').html('
  <a class="GAds" href="https://ads.google.com">
    <img height="80" width="80" class="img-ads" src="https://images.unsplash.com/photo-1593642532400-2682810df593?ixid=MnwxMjA3fDF8MHxlZGl0b3JpYWwtZmVlZHwxfHx8ZW58MHx8fHw%3D&ixlib=rb-1.2.1&auto=format&fit=crop&w=500&q=60">
    <div class="ads">
      '+adTypeName+'
    </div>
  </a>');
});

Essentually we are just taking out code block and depending on the screen size we are saying whether it’s “Desktop Google Ads” or “Mobile Google Ads”. Then we insert the entire code block into the div element called .ad-container.

You would most likely want to use Option 1 however I figured I’d provide option 2 in-case for some reason you would need that instead? But I would only choose 2 over 1 if I had a very specific reason for doing so.