Add class to labels forms in jquery

Question

I'm trying to edit the wordpress contact form to customize it. I have already add function to use placeholder for my labels. So now I wish add a class whish correspond to their "for=" attribute for each of them in order to hide the label's text.

There is a way to do that in jquery ?

this is my jquery:

jQuery(document).ready(function(){
    jQuery('#user_login').attr('placeholder', 'Name');
    jQuery('#user_email').attr('placeholder', 'Email');
    jQuery('#user_pass').attr('placeholder', 'Password');         

});

and my html:

<form name="loginform" id="loginform" action="http://localhost/patrick/waf" method="post" style="position: static; left: 0px;">
    <p>
        <label for="user_login">Nom d’utilisateur ou adresse e-mail<br>
        <input type="text" name="log" id="user_login" aria-describedby="login_error" class="input" value="" size="20" placeholder="Name"></label>
    </p>
    <p>
        <label for="user_pass">Mot de passe<br>
        <input type="password" name="pwd" id="user_pass" aria-describedby="login_error" class="input" value="" size="20" placeholder="Password"></label>
    </p>
        <div>
        <div id="areyouhuman">
            <label>
                <span class="checkme" role="checkbox" tabindex="0" aria-checked="false"></span>
                <i class="checkme">Oui, je suis un humain.</i>
            </label>
        </div>
        <div id="msg" class="hidden">Session expirée, merci de réessayer.</div>
        <input type="hidden" name="captcha_key" id="captcha_key" value="">
    </div>
        <p class="forgetmenot"><label for="rememberme"><input name="rememberme" type="checkbox" id="rememberme" value="forever" checked="checked"> Se souvenir de moi</label></p>
    <p class="submit">
        <input type="submit" name="wp-submit" id="wp-submit" class="button button-primary button-large" value="Se connecter">
        <input type="hidden" name="redirect_to" value="http://localhost/patrick/wp-admin/">
        <input type="hidden" name="testcookie" value="1">
    </p>
</form>

Answer 1

Use an attribute selector.

$("label[for=user_login],label[for=user_email],label[for=user_pass]")
    .contents().filter(function(){ return this.nodeType == 3; }).first().replaceWith("");

See How can I change an element's text without changing its child elements? for an explanation of how that works. This complicated code is necessary because the <label> elements wrap around the inputs, so you can't just do .text("") because that would also remove the inputs.

You could also just get rid of the labels entirely with unwrap().

jQuery(document).ready(function(){
    jQuery('#user_login').attr('placeholder', 'Name').unwrap();
    jQuery('#user_email').attr('placeholder', 'Email').unwrap();
    jQuery('#user_pass').attr('placeholder', 'Password').unwrap();         

});