Tengo un div vacío que uso para los mensajes de estado una vez que mi script jQuery se ejecutó correctamente. Tengo varias llamadas jQuery / AJAX que usan el mismo div para los mensajes de estado, sin embargo, después del primer script y el primer llenado exitoso del div, el div ya no es reutilizable, lo que significa que el mensaje de éxito del segundo script no se muestra.
¿Cómo puedo completar y luego borrar un contenido div para que pueda volver a utilizarse más adelante?
// populate status div $('#status').html(response); // remove success message after 5 secs setTimeout(function() { $('#status').fadeOut('fast'); }, 5000); <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="status"></div>Probé varias otras formas de jQuery para borrar el contenido, pero todas tienen el mismo resultado.
$('#status').empty()$('#status').val('')$('#status').end()Lea la documentación sobre lo que hacen estos métodos jQuery.
.empty() - elimina todos los elementos secundarios
.val('') - está diseñado para usarse solo en elementos de entrada
.end() : finaliza End the most recent filtering operation in the current chain and return the set of matched elements to its previous state ; no hace nada para contentarse.
No necesita borrar ningún contenido, ya que fadeOut ocultará el elemento. Lo que quiere hacer es desvanecerse en ese elemento nuevamente y establecer nuevo contenido en él
// populate status div setContent('Initial content'); // remove success message after 5 secs setTimeout(function() { $('#status').fadeOut('fast'); }, 5000); // show success message again after 10 secs setTimeout(function() { setContent('Repeated content'); }, 10000); function setContent(content) { $('#status') .html(content) .fadeIn('fast'); } <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div id="status"></div>