I wrote this: when you start typing in the input, the span appears, but the fact is that if you then erase what you wrote, then this span remains, but you need to hide it. I wrote a condition inside the function, but something does not work, the span does not appear at all.

$('label.form-group').keyup(function() { $(this).children('span:first-child').show(); if ($('label.form-group input').value === '' || $('label.form-group input').value === this.defaultValue) { $('label.form-group>span:first-child').hide(); } }); 
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="form-group"> <span>×</span> <input class="form-control validate" id="email" type="text" required> </label>

    3 answers 3

    In jquery, val() instead of value ;

    this.defaultValue → $(this).defaultValue ;

    Well, I would still hang up the event handler on the input, and not on the label, you never know how it will be with markup then.

     $('.form-control').keyup(function() { $(this).prev().show(); if ($(this).val() === '' || $(this).val() === $(this).defaultValue) { $(this).prev().hide(); } }); 
     label.form-group span { display: none; } 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="form-group"> <span>×</span> <input class="form-control validate" id="email" type="text" required> </label>

      $('label.form-group input').value will return undefined . In jQuery you need to use the val method to get the value. You probably need something like that, if I understood correctly:

       $('label.form-group').keyup(function () { $(this).children('span:first-child').show(); if ($('label.form-group input').val().trim() === '' || $('label.form-group input').val().trim() === this.defaultValue) { $('label.form-group>span:first-child').hide(); } }); 
       <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <label class="form-group"> <span style="display:none">×</span> <input class="form-control validate" id="email" type="text" required> </label>

      For studying:

      1. .val ()
      2. jQuery.trim () - I think it will be useful too

        Example response, tracking the change javascript event:

         $("#email").on("change", function () { var parent = $(this).parent()[0], yourSpan = $(parent).find("span")[0]; if ($(this).val() == "") { $(yourSpan).hide(); } else { $(yourSpan).show(); } })

        And HTML:

         <label class="form-group"> <span>×</span> <input class="form-control validate" id="email" type="text" required> </label>