3

Tengo un div padre que contiene varios hijos que aparecen y reaparecen. Me gustaría hacer desaparecer al padre cuando éste se queda sin hijos.

$("#ocul1").click(function(){
  $("#hijo1").toggle();
});


$("#ocul2").click(function(){
  $("#hijo2").toggle();
});

$("#ocul3").click(function(){
  $("#hijo3").toggle();
});
#padre1 {
  background-color:red;
  width:30%;
  color:white;
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre1">
  DivPadre1 
    <br>
    <br>
<div id="hijo1">
  DivHijo1 <button id="ocul1">x</button>
  </div>
  <div id="hijo2">
  DivHijo2 <button id="ocul2">x</button>
  </div>
  
    <div id="hijo3">
  DivHijo3 <button id="ocul3">x</button>
  </div>
</div>

4 respuestas 4

6

Esta solución refactoriza el código para ahorrar repetir eventos onClick y logica para ocultar el padre.

Se usa un mutationObserver sobre el padre que mira el style de si mismo y sus hijos.

Cuando uno de los divs se oculta, el observer que lo ha detectado analiza si el padre tiene todos sus div-hijos ocultos. De ser asi, el padre se oculta.

Cuando usamos hijoX.show() desde cualquier otra parte del codigo, el observer lo detecta y como ahora no todos sus hijos tienen display : none; entonces, muestra el padre de nuevo.

var padre = $('#padre1');

$("button[id*=ocul").click(function() {
  $(this).parent().toggle();
});


new MutationObserver(async(records, _) => {
console.clear();
console.log(records[0].target)
  if (padre.find('div[style*="display: none;"]').length == padre.find('div').length) {
    padre.hide();
  } else {
    padre.show();
  }
}).observe(padre[0], {
  childList: true,
  subtree: true,
  attributeFilter: ['style']
});
#padre1 {
  background-color: red;
  width: 30%;
  color: white;
  padding: 10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre1">
  DivPadre1
  <br>
  <br>
  <div id="hijo1">
    DivHijo1 <button id="ocul1">x</button>
  </div>
  <div id="hijo2">
    DivHijo2 <button id="ocul2">x</button>
  </div>

  <div id="hijo3">
    DivHijo3 <button id="ocul3">x</button>
  </div>
</div>


<button onclick="$('#hijo1').show()">
mostrar hijo 1 con 'show()'
</button>

2

Con Jquery puedes utilizar una función y comprobar cada vez si el padre se ha quedado sin hijos visibles. Te dejo un ejemplo de como sería:

$("#ocul1").click(function(){
  $("#hijo1").toggle();
  checkEmptyFather();
});


$("#ocul2").click(function(){
  $("#hijo2").toggle();
  checkEmptyFather();
});

$("#ocul3").click(function(){
  $("#hijo3").toggle();
  checkEmptyFather();
});

function checkEmptyFather() {
  if ($("#padre1").children('div :visible').length <= 1){
  	$("#padre1").toggle();
  }
}
#padre1 {
  background-color:red;
  width:30%;
  color:white;
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre1">
  DivPadre1 
    <br>
    <br>
<div id="hijo1">
  DivHijo1 <button id="ocul1">x</button>
  </div>
  <div id="hijo2">
  DivHijo2 <button id="ocul2">x</button>
  </div>
  
    <div id="hijo3">
  DivHijo3 <button id="ocul3">x</button>
  </div>
</div>

2

Yo lo haría de la siguiente manera, siempre y cuando sepas el numero de hijos que vas a tener.

let nHijos = 3;
let nHijosOcultos = 0;
$("#ocul1").click(function(){
  $("#hijo1").toggle();
  if($("hijo1").is(":visible")){  
  	nHijosOcultos--;
  }else{
  	nHijosOcultos++;
  }
  eliminapadre();
});


$("#ocul2").click(function(){
  $("#hijo2").toggle();
  if($("hijo2").is(":visible")){
  	  nHijosOcultos--;
  }else{  	
    nHijosOcultos++;
  }
  eliminapadre();
});

$("#ocul3").click(function(){
  $("#hijo3").toggle();
  if($("hijo3").is(":visible")){
  	nHijosOcultos--;
  }else{
  	nHijosOcultos++;
  }
  eliminapadre();
});

function eliminapadre(){
 if(nHijos == nHijosOcultos){
	 $("#padre1").toggle();
 }
}
#padre1 {
  background-color:red;
  width:30%;
  color:white;
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre1">
  DivPadre1 
    <br>
    <br>
<div id="hijo1">
  DivHijo1 <button id="ocul1">x</button>
  </div>
  <div id="hijo2">
  DivHijo2 <button id="ocul2">x</button>
  </div>
  
    <div id="hijo3">
  DivHijo3 <button id="ocul3">x</button>
  </div>
</div>

Simplemente he añadido 2 variables que indican el numero de hijos que tiene el div padre, y el numero de hijos que están ocultos.

Cuando se oculta un hijo aplico la funcion .is(":visible") para saber si el hijo esta oculto. En el caso de estarlo sumaríamos 1 a la variable que cuenta el numero de hijos ocultos, si estuviera visible restaríamos 1.

Cada vez que se oculta pulsa un botón se va a lanzar la función eliminapadre, esta comprueba si el numero de hijos y el numero de hijos ocultos es el mismo. En el caso de serlo significaría que todos los hijos están ocultos y por lo tanto el padre también lo estará.

SOLUCION 2

Comentando por el chat el usuario @lois6b a aportado una solución refactorizada, de manera que ahorramos unas cuantas lineas de código.

$("button[id*=ocul").click(function(){
    toggleAndHide($(this).parent())
});

function toggleAndHide(elem){

  elem.toggle()
  if(elem.siblings('div:visible').length  == 0){
    elem.parent().toggle();
  }
}

$("button[id*=ocul").click(function(){
  toggleAndHide($(this).parent())
});

function toggleAndHide(elem){

  elem.toggle()
  if(elem.siblings('div:visible').length  == 0){
elem.parent().toggle();
  }
}
#padre1 {
  background-color:red;
  width:30%;
  color:white;
  padding:10px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="padre1">
  DivPadre1 
    <br>
    <br>
<div id="hijo1">
  DivHijo1 <button id="ocul1">x</button>
  </div>
  <div id="hijo2">
  DivHijo2 <button id="ocul2">x</button>
  </div>
  
    <div id="hijo3">
  DivHijo3 <button id="ocul3">x</button>
  </div>
</div>

0

Con CSS, el selector :empty debería funcionar:

div#padre:empty { display: none; }
2
  • lo intente pero no dio resultado. La idea igualmente sería realizarlo con jquery/javascript
    – Elias Aria
    el 26 feb. 2019 a las 7:00
  • 4
    @Ilsanchez El problema es que realmente no se queda nunca vacío, los hijos están ocultos y hay elementos <br/> el 26 feb. 2019 a las 9:21

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.