Remove spacing outside input div input due to Rails 3 `field_with_errors`

Question

In my Rails 3 application, I remove the <span> that I use as a placeholder for input using jQuery. If I submit the form and I get errors, the form will reload and errors will appear. However, for fields where there were errors, the <span> will not be cleared of input because the <span> no longer inside the <div> containing the input. (This is because the field_with_errors <div> error was added.) How can I get around this and still remove the <span> , despite the field_with_errors?

Here is my jQuery:

 // placeholder label for text $(function() { $("span.holder + input").keyup(function() { if($(this).val().length) { $(this).prev('span.holder').hide(); } else { $(this).prev('span.holder').show(); } }); $("span.holder").click(function() { $(this).next().focus(); }); }); 

My html with field_with_errors (jQuery does not work):

 <div class="holds email"> <span class="holder">Email</span> <div class="field_with_errors"> <input autocomplete="off" id="user_email" name="user[email]" size="38" type="text" value=""> </div> </div> 

My html borderless_with_errors (jQuery works):

 <div class="holdsname"> <span class="holder">Last name</span> <input autocomplete="off" class="inner" id="user_profile_attributes_last_name" name="user[profile_attributes][last_name]" size="18" type="text"> </div> 

Answer 1

What about

 $('.holds').find('input').keyup(function () { if ($(this).val().length) { $(this).closest('.holds').find('.holder').hide(); } else { $(this).closest('.holds').find('.holder').show(); } }); $('span.holder').click(function () { $(this).parent().find('input').focus(); }); 

jsFiddle