1

As I hide an <input> tag with the hide() function in JQuery Mobile, also, it hides the <input> it does not hide the <div> surrounding the <input> that has been implemented by JQuery Mobile.

I could work on the DOM afterwards to make it disapear of course, but I am looking for a better solution.

Here is the case, you'll notice that the div surrounding <input type="text" name="lastname" id="lastname"> is still on the screen (you can run it a W3C editor like here):

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>Text Inputs</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="/action_page_post.php">
      <div class="ui-field-contain">
        <label for="firstname">First name:</label>
        <input type="text" name="firstname" id="firstname">
        <label for="lastname">Last name:</label>
        <input type="text" name="lastname" id="lastname">
        <script type="text/javascript">
                    $(document).ready(
                        $('body').find('[id="lastname"]').hide()
                    );
        </script>           

      </div>
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

</body>
</html>

I've tried to apply the hide() function on the parent() but it does take the parent as if, the <div> that I want to hide is not yet on the screen, and hide the whole form instead of a specific field:

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="https://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>

<div data-role="page">
  <div data-role="header">
  <h1>Text Inputs</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="/action_page_post.php">
      <div class="ui-field-contain">
        <label for="firstname">First name:</label>
        <input type="text" name="firstname" id="firstname">
        <label for="lastname">Last name:</label>
        <input type="text" name="lastname" id="lastname">
        <script type="text/javascript">
                    $(document).ready(
                        $('body').find('[id="lastname"]').parent().hide()
                    );
        </script>           

      </div>
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>

</body>
</html>
nyluje
  • 3,573
  • 7
  • 37
  • 67

1 Answers1

0

At the moment you try to access to the parent div it is not painted.. One way is to use JavaScript setTimeout() method to hide that div element:

setTimeout(function() {
  $('#lastname').parent().hide();
}, 1);
<link rel="stylesheet" href="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="//code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>

<div data-role="page">
  <div data-role="header">
  <h1>Text Inputs</h1>
  </div>

  <div data-role="main" class="ui-content">
    <form method="post" action="/action_page_post.php">
      <div class="ui-field-contain">
        <label for="firstname">First name:</label>
        <input type="text" name="firstname" id="firstname">
        <label for="lastname">Last name:</label>
        <input type="text" name="lastname" id="lastname">
      </div>
      <input type="submit" data-inline="true" value="Submit">
    </form>
  </div>
</div>
Community
  • 1
  • 1
Yosvel Quintero
  • 18,669
  • 5
  • 37
  • 46