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.

Leave a reply

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

You may also like