Hey! Hola que tal amigos de Junior a Senior el día de hoy les vengo con un nuevo post. El cual consta de ocultar un div si otro div se encuentra vacío y no queremos que la información se muestre a menos que los dos campos se encuentren llenos, si no de lo contrario estos se ocultaran y solo los que tienen información podrán ser mostrados al usuario.

Y empecemos, lo primero que mostraremos un ejemplo de nuestro codigo html y cómo se estructura, solo nosotros tenemos que adaptarlo a nuestra necesidad. Como ven es muy sencillo de interpretar ya que en este caso ocultaremos un <label> y un <a> en ves de dos divs.

<div class="contain-info">
   <label class="data_label">labe</label>
   <a class="data_text" href="https://www.dejuniorasenior.com" target="_blank">https://www.dejuniorasenior.com</a>
</div>

Como segundo paso agregaremos nuestro script el cual ocultara nuestra sección si se encuentra vacía y de lo contrario nos la mostrara.

let data_hide = document.querySelectorAll('.data_label, .data_text');
data_hide.forEach(function(element) {
  if (element.textContent === '') {
    element.previousElementSibling.style.display = 'none';
    element.style.display = 'none';
  }
});

Observaciones: Puede que el script les funcione de forma correcta en consola pero una ves lo coloquemos en nuestro codigo traten de que este se encuentre en el footer.

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