Question

I have the code live here(JSFiddle):

Jquery does not hide the label on keypress.

JQUERY:

$(document).ready(function(){
$('input').keypress(function(){
$(this).closest('label').hide();
});
});

HTML:

<div id="login">
<h2 style="font-size:18px;">Login</h2>

<form method="post" id="user_new" class="user_new" action="/users/sign_in" accept-charset="UTF-8"><div style="margin:0;padding:0;display:inline"><input type="hidden" value="✓" name="utf8"><input type="hidden" value="CFIZzyFucEG03h33m6dzX9DNy/Ux11yjShcT2xZnZRs=" name="authenticity_token"></div>
  <p style="position: relative; float: left; margin-bottom: 0px;"><label style="position:absolute;margin:0px;top:10px;left:20px;color:#CCCCCC;" for="user_email">Email</label>
  <input type="email" value="" size="30" name="user[email]" id="user_email">
  </p>

  <p style="position: relative; float: left; margin-top: 5px;"><label style="position:absolute;margin:0px;top:10px;left:20px;color:#CCCCCC;" for="user_kodeord">Kodeord</label>
  <input type="password" size="30" name="user[password]" id="user_password">
  </p>

    <p><input type="hidden" value="0" name="user[remember_me]"><input type="checkbox" value="1" name="user[remember_me]" id="user_remember_me"> <label for="user_Husk_mig">Husk mig</label></p>
  <p><input type="submit" value="Login" name="commit" id="user_submit"></p>
<div style="    display: block;
    float: left;
    margin-top: 20px;
    width: 400px;margin-left: -20px;">
  <a href="/users/sign_up">Sign up</a><br>

  <a href="/users/password/new">Forgot your password?</a><br>



</div>
</form></div>

Answer 1

It’s unclear what part of your HTML you’re referring to, but to select <label> elements next to your input, you need to use $.prev() for immediately previous elements and $.next() for elements immediately after your input.

$.closest() selects the closes parent of the element, not the “physically” closest element in the DOM, which is why your <label> isn’t being hidden; it’s not selected.