estoy tratando de validar un campo de email, mostrando un mensaje de error si el email no está bien introducido (con transición). En teoría funciona bien pero no sé si la función está realmente bien planteada. Además, si la el email es correcto o el input está vacío el mensaje desaparece pero el contenido permanece, he probado con ```inerHTML = ""``` pero la transición deja de funcionar. ¿Que podría hacer para vaciar el contenido? Gracias de antemano. <!-- begin snippet: js hide: false console: true babel: false --> <!-- language: lang-js --> const email = document.querySelector('#email'); eventListeners(); function eventListeners() { email.addEventListener('keyup', validateEmail); } function validateEmail() { const email = document.querySelector('.email'), error = document.querySelector('.error'), inputEmail = document.querySelector('#email'), formatEmail = /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/; if (inputEmail.value.match(formatEmail)) { error.classList.remove("show"); } else { if (inputEmail.value !== "") { error.innerHTML = `<p>error</p>`; error.classList.add("show") } else { error.classList.remove("show"); } } } <!-- language: lang-css --> .error { width: 200px; max-height: 0; transition: max-height 1s ease-out; overflow: hidden; background: #d5d5d5; text-align: center; } .show { max-height: 100px; transition: max-height 1s ease-in; } <!-- language: lang-html --> <div class="name"> <label for="name">Name:</label> <input type="text" id="name" name="name" placeholder="Name"> </div> <div class="email"> <label for="email">Email:</label> <input type="email" id="email" name="email" placeholder="Email"> <div class="error"></div> </div> <div class="password"> <label for="password">Password:</label> <input type="password" id="password" name="password" placeholder="Password"> </div> <!-- end snippet -->