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.
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.
:empty
div{
background: red;
height: 20px;
}
<div></div>
<div>s</div>
<div></div>
<div>m</div>
<div></div>
:empty
div{
background: red;
height: 20px;
}
div:empty {
display:none;
}
<div></div>
<div>s</div>
<div></div>
<div>m</div>
<div></div>
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 ocultamientoelem.style.display = "none";
realiza el ocultamiendo aplicando la propiedad de CSS display:none
sobre el elemento que ha conseguido entrar en el condicional.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>
TypeError: contenido.style.display is not a function"
Commented
el 30 abr. 2022 a las 16:30
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
Commented
el 30 abr. 2022 a las 16:47
div:empty {display:none;}
Ten en cuenta que si eldiv
tiene al menos un espacio en blanco si se mostrará. Más detalles en la documentación.