Tengo un formulario de actualización de perfil de usuario y un botón de eliminación de cuenta. Quiero mostrar el botón Eliminar cuenta solo si el usuario puede ingresar su correo electrónico.
$(document).ready(function() { var user_email = $('input[name="emp_email"]').attr('placeholder'); $(".email-pass-delete").on("input", function() { var current_email = $('.email-pass-delete').val(); if (user_email == current_email) { $(".del_acount").removeClass("hide_del_button"); } }); }); .hide_del_button { display: none; } <input type="text" disabled="" placeholder="testemail@gmail.com" name="emp_email" class="form-control"> <input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete"> <input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>Su código está funcionando, pero olvidó la instrucción else. Si el usuario lo corrigió una vez y luego lo cambia, seguirá mostrándose también.
$(document).ready(function() { var user_email = $('input[name="emp_email"]').attr('placeholder'); $(".email-pass-delete").on("input", function() { var current_email = $('.email-pass-delete').val(); if (user_email == current_email) { $(".del_acount").removeClass("hide_del_button"); } else { $(".del_acount").addClass("hide_del_button"); } }); }); .hide_del_button { display: none; } <input type="text" disabled="" placeholder="testemail@gmail.com" name="emp_email" class="form-control"> <input type="text" placeholder="If you want to delete your account please enter your Email" value="" name="email_pass" class="form-control email-pass-delete"> <input type="button" value="Delete account?" class="btn btn-custom del_acount hide_del_button"> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>En su código real, solo muestra el botón cuando el correo electrónico es correcto, debe agregar una declaración else para ocultar el botón nuevamente. Pero hay un enfoque más interesante que es usar la función toggleClass . Para obtener más información sobre la función toggleClass, consulte https://api.jquery.com/toggleclass/
Entonces su código js debería verse así:
$(document).ready(function() { var user_email = $('input[name="emp_email"]').attr('placeholder'); $(".email-pass-delete").on("input", function() { var current_email = $('.email-pass-delete').val(); $(".del_acount").toggleClass( "hide_del_button", !(user_email == current_email)) }); });