3

Hola comunidad una consulta como podría hacer para ocultar un

<div></div>

si este no tiene contenido y mostrarlo cuando si hay contenido?. Quiza sea facil la pregunta pero no se aun mucho de programación gracias.

3
  • 2
    Usando solo CSS: div:empty {display:none;} Ten en cuenta que si el div tiene al menos un espacio en blanco si se mostrará. Más detalles en la documentación.
    – Jaime
    Commented el 30 abr. 2022 a las 17:15
  • 2
    @JaimeMenéndez Esta genial! Ponlo como respuesta, es la mejor sin duda.
    – masterguru
    Commented el 30 abr. 2022 a las 17:54
  • 2
    @masterguru gracias, ahí agregué una respuesta.
    – Jaime
    Commented el 30 abr. 2022 a las 18:10

3 respuestas 3

7

Puedes ocultar los div vacíos usando solo css mediante la pseudo-clase :empty, para ello establece en tus estilos:

div:empty {
  display:none;
}

Este selector matcheará todos los div que estén vacíos y los ocultará. Te adjunto un ejemplo SIN el selector y otro CON el selector para que se aprecie la diferencia.

Sin :empty

div{
  background: red;
  height: 20px;
}
<div></div>
<div>s</div>
<div></div>
<div>m</div>
<div></div>

Con :empty

div{
  background: red;
  height: 20px;
}

div:empty {
  display:none;
}
<div></div>
<div>s</div>
<div></div>
<div>m</div>
<div></div>

1
  • 2
    Muy bien explicado tambien! Gracias por el aporte
    – masterguru
    Commented el 30 abr. 2022 a las 18:14
3

Con este código en javascript ocultas todos los vacios, y en el caso que alguno reciba contenido dinámicamente debes analizar cuando eso se puede producir y cambiarle la propiedad display por la que desees en ese momento.

divs = document.querySelectorAll('div')
divs.forEach(elem => {
  if (elem.textContent == ""){
    elem.style.display = "none"; 
  }
})

donde:

  • divs = document.querySelectorAll('div') recoge en la variable divs todos los elementos div de tu documento gracias a la función querySelectorAll()
  • divs.forEach(elem => { inicia un bucle forEach() donde recorrerlos todos, y donde elem representa a cada uno de ellos dentro del bucle en cada ciclo.
  • if (elem.textContent == ""){ realiza una comparación del contenido del div (que conocemos gracias a la propiedad textContent) con una cadena vacía, y si se cumple entra en el condicional para aplicar el ocultamiento
  • elem.style.display = "none"; realiza el ocultamiendo aplicando la propiedad de CSS display:none sobre el elemento que ha conseguido entrar en el condicional.
1

Poniendo una id al div y escondiendo o enseñando segun si tiene contenido o no.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    
</head>
<body>
<div id="content"></div>

    <script>

contenido = document.getElementById('content');

  if (contenido == ""){
    contenido.style.display ='none';
  }else{
    contenido.style.display ='initial';
  }

</script>   
</body>
</html>
6
  • 1
    No era .style.display = 'none'?
    – Mateo
    Commented el 30 abr. 2022 a las 16:19
  • Funciona de las dos maneras.
    – jbort
    Commented el 30 abr. 2022 a las 16:21
  • No estoy tan seguro.. en jsfiddle (jsfiddle.net/2c5nkwy3) me dice que no: TypeError: contenido.style.display is not a function"
    – masterguru
    Commented el 30 abr. 2022 a las 16:30
  • Yo lo probe con visual studio y el navegador y si me funciona, lo voy a editar, si que es verdad que la forma corracta correcta es la tuya, me confundi, pero aun asi funciona, por eso no me di cuenta..
    – jbort
    Commented el 30 abr. 2022 a las 16:44
  • No, no funciona, lo que ocurre es que igualmente en tu navegador no se aprecia nada, porque no hay ningun contenido, pero si te vas a la consola veras esto: Uncaught TypeError: contenido.style.display is not a function (probado en firefox y chrome), y si inspeccionas el codigo veras qeu no se agrega el style que pretendes aplicar. Por otra parte, usas contenido == "" cuando diria que esto también está mal, porque no le dices que propiedad debe ser la que no tenga contenido, se lo estas preguntando a todo el elemento en si
    – masterguru
    Commented el 30 abr. 2022 a las 16:47

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.