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>