Hiding a div when on a certain page

Question

So I have 3 select option boxes. I want to hide the third one when its on a certain page. For some reason my code isn't working. What am I doing wrong?

HTML:

<div class="form-group">
<label class="col-md-4 control-label">First:</label>
<div class="col-md-8">
<select id="first" class="form-control">
  <option>1</option>
  <option>2</option>
  <option>3</option>
 </select>
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Second:</label>
<div class="col-md-8">
<select id="second" class="form-control">
  <option>4</option>
  <option>5</option>
  <option>6</option>
 </select>
</div>
</div>
<div class="form-group">
<label id="thirdid" class="col-md-4 control-label">Third:</label>
<div class="col-md-8">
<select id="third" class="form-control">
  <option>7</option>
  <option>8</option>
  <option>9</option>
 </select>
</div>

Script:

 if (top.location.pathname === '/ajax/test/yes.html')
                {
                    $("#third").hide();
                    $("#thirdid").hide();
                }

Answer 1

I believe

if (window.location.pathname === '/ajax/test/yes.html') { }

will work. Taken directly from here you can find the parts of a URL like this:

var newURL = window.location.protocol + "//" + window.location.host + window.location.pathname;

Answer 2

This should work

   $(function(){
          if (window.location.pathname == "/ajax/test/yes.html") {
              $("#third").hide();
              $("#thirdid").hide();
          } 
     });