JQuery hide a button based on another button's visibility

Issue

I am new to JQuery. I am trying to hide a button if another button is "display: inline" as soon as the page is loaded. When I opened the following html file on a browser I got the alert "page loaded" only. What am I missing? Thank you!

$(document).ready(function() {
  function hideButton() {
    alert("page Loaded");
    if ($('#Email').css('display') == 'inline') {
      alert("found send email button.  Now watch the Continue button disappear.");
      $("#Continue").css({
        display: "none",
        visibility: "hidden"
      });
      $("#Continue").hide();
    }
  };
  hideButton();
});

.sendEmailButton {
  background-color: yellow;
}

.continueButton {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>On page load the button "Continue" will display after page loaded</p>
<div> <button class="sendEmailButton" id="Email" type="button" style="display: inline;">Send Email</button></div>
<br>
<div> <button class="continueButton" id="Continue" type="button" style="display: inline;">Continue</button></div>

I expect the "Continue" button to disappear after the alert message "page loaded".

Solution

Consider the following.

$(document).ready(function() {
  function hideButtonCond(test, target) {
    if ($(test).is(":visible")) {
      console.log("Button " + test + ", is visible.", "Hiding " + target);
      $(target).css({
        display: "none",
        visibility: "hidden"
      }).hide();
    }
  };
  hideButtonCond("#Email", "#Continue");
});

.sendEmailButton {
  background-color: yellow;
}

.continueButton {
  background-color: pink;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<p>On page load the button "Continue" will display after page loaded</p>
<div> <button class="sendEmailButton" id="Email" type="button" style="display: inline;">Send Email</button></div>
<br>
<div> <button class="continueButton" id="Continue" type="button" style="display: inline;">Continue</button></div>

This uses .is() to test if the element is visible, a Selector Filter.

Answered By - Twisty