hide element based on URL href

I need to hide an element based on the window.location.href object. My approach is below:

$(document).ready(function() {
  var windowURL = window.location.href;

  if (windowURL.indexOf('stackoverflow') > -1) {
   $('#hide-this').css('display', 'none');
  }
});

#hide-this {
  width: 100px;
  height: 100px;
  background-color: red;
}

#show-this {
  width: 100px;
  height: 100px;
  background-color: green;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>
<div id="hide-this"></div>
<div id="show-this"></div>

The expected result is to hide the red square. However it still shows. I'm a little lost as to what I'm doing wrong, as this seems pretty basic/straightforward...It's probably something small that I'm missing. any help would be appreciated.

Here is a JSfiddle as well demonstrating the same issue: https://jsfiddle.net/ce86zb3r/8/

UPDATE: Looks like the code is having trouble here in this specific context due to iFrames, but it doesn't work on the site I'm working on, despite the URL being correct when console.loged - why would that be?

FINAL UPDATE: I was editing the wrong file. Lol...