Ocultar div si el campo se encuentra vacío con Javascript
Hey! Hola que tal amigos de Junior a Senior el día de hoy les vengo con un nuevo post. El cual consta de mostrar u ocultar un campo si este se encuentra vacío.
Esto suele suceder si no queremos que se muestre un campo en especifico se encuentra vacío y no queremos que se muestre con los demás que tengan información.
Lo primero que haremos es crear o adaptar el siguiente codigo al nuestro lo cual es muy sencillo ya que no tiene mucha complejidad, por lo cual será muy fácil de entender y acoplar a nuestro codigo.
<div class="data">
<label class="data_label">telefono</label>
<p class="data_text">77712345678</p>
<label class="data_label">contacto</label>
<p class="data_text">contacto@dejuniorasenior.com</p>
<label class="data_label">codigo postal</label>
<p class="data_text">62500</p>
</div>
Aquí agregaremos el siguiente codigo el cual ocultara un un campo si este se encuentra vacío y lo mostrara si este se encuentra lleno.
let data = document.querySelectorAll('.datasigpa > .datasigpa_label, .datasigpa_text');
data.forEach(function(element) {
if (element.textContent === '') {
element.previousElementSibling.style.display = 'none';
element.style.display = 'none';
}
});
Espero les haya servido de algo esta breve información, si tienen dudas u otras maneras de hacerlo pueden mostrárnoslo en los comentarios, esto ayudara a qué todos crezcamos y resolvamos nuestros problemas de forma rápida y sencilla.
Y sin mas que decir por el momento, nos vemos y espero nos apoyen con sus opiniones y comentarios, saludos.