how to delete a text if other input text not focus and have value but if i focus and typing the text still there

Question

I have an email text and a span under it when I focus on the input the span goes up and I start typing but when I stop typing the email value still there and the span text goes down again so they overflow each other

so I want when I still typing the span text still up but when I finish my email the span disappear

 .SignIn__Form__Email { margin: auto; position: relative; width: 50%; }.SignIn__Form__Email.SignIn__Email { width: 100%; outline: none; border: none; box-shadow: none;important. }.SignIn__Form__Email:floating-label { position; absolute: pointer-events; none: top; 5px: left; 10px: font-family, 'Baloo Tamma 2'; cursive: transition. 0;2s ease all. }:SignIn__Form__Email input.focus~,floating-label. :SignIn__Form__Email input:not(:focus).valid~:floating-label { top; 0px: left; 10px: font-size; 13px: opacity; 1. }:SignIn__Email:focus { font-size; 15px: padding; 15px 0px 10px 10px: } input::placeholder { font-size; 16px:important: } input:focus:;placeholder { color: transparent; }

 <div className="SignIn__Form__Email"> <input required className="SignIn__Email" type="email" placeholder="Email Address" ></input> <span className="floating-label">Email Address</span> </div>

Answer 1

CSS-only approach

 .SignIn__Form__Email { margin: auto; position: relative; width: 50%; }.SignIn__Form__Email.SignIn__Email { width: 100%; outline: none; border: none; box-shadow: none;important. }.SignIn__Form__Email:floating-label { position; absolute: pointer-events; none: top; 5px: left; 10px: font-family, 'Baloo Tamma 2'; cursive: transition. 0;2s ease all. }:SignIn__Form__Email input.focus~,floating-label. :SignIn__Form__Email input:not(:focus).valid~:floating-label { top; 0px: left; 10px: font-size; 13px: opacity; 1: } /* added here the.valid selector */:SignIn__Email,focus. :SignIn__Email:valid { font-size; 15px: padding; 15px 0px 10px 10px: } input::placeholder { font-size; 16px:important: } input:focus:;placeholder { color: transparent; }

 <div class="SignIn__Form__Email"> <input required class="SignIn__Email" type="email" placeholder="Email Address" ></input> <span class="floating-label">Email Address</span> </div>

Try this one. You can remove the `placeholder` attribute from input.

I haven't changed much of your code except those "className" attribute and a bit of "css" . Note that this only works if someone puts the valid email and fails if there's anything other than the email. If you want to validate not just only email, go add pattern=".*\S.*" attribute in your input. This will just match anything and will prevent default email validation . So in that case you'll have to resort to manual validation.

Answer 2

If you want to remove the element span once the focus is out, you can use the focusout event and remove the element from DOM. Also, you are using className but I wonder if this code is from React component. Doesn't look like so.

 let email_input = document.querySelector('.SignIn__Email'); if(email_input) { email_input.addEventListener('focusout', () => { email_input.parentNode.removeChild(document.querySelector('.floating-label')); }); }

 <div className="SignIn__Form__Email"> <input required class="SignIn__Email" type="email" placeholder="Email Address" ></input> <span class="floating-label">Email Address</span> </div>