Show Child Div Within Hidden Parent Div

Show Child Div within Hidden Parent Div

I don't think it's possible.

You can use JavaScript to pull the element out, or duplicate it and then show it.

In jQuery you could copy an element.

var element = jQuery('.Inner-Div').clone();

And then append to any visible element that might be appropriate.

element.appendTo('some element');

How to Hide Parent Div when the Child Div's display is none

You can just add:

if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();

This will check if there are any visible elements with the class tagParent and if there is none, then it will hide <div class="filterTags">

Demo

$(".tagCloser").click(function() {  $(this).parent(".tagParent").hide();  if($('.filterTags .tagParent:visible').length == 0) $('.filterTags').hide();});

.filterTags {  display: flex;  flex-wrap: wrap;  padding: 20px 25px 10px;  background: yellow;}
.tagParent {  padding: 0px 0px 0px 15px;  background: #e40046;  color: #fff;  font-family: Bold;  border-radius: 5px;  margin: 0px 10px 10px 0px;  display: flex;}
.tagContent {  align-self: center;}
.tagCloser {  padding: 7px 10px;  cursor: pointer;  align-self: center;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filterTags">  <div class="tagParent">    <span class="tagContent">Urgent</span>    <span class="tagCloser">x</span>  </div>
  <div class="tagParent">    <span class="tagContent">Popular</span>    <span class="tagCloser">x</span>  </div></div>

how can I hide parent div if all the children are display:none

Try like this using Jquery.

$(".abc").map(function(){
    let flag = true;
    $(this).find(".xyz").map(function(){
       if($(this).css("display") != "none"){
          flag = false;
       }
    });

    if(flag){
       $(this).css("display", "none");
    }else {
       $(this).css("display", "block");
    }
})

JQuery: Show child element that is within a hidden parent element

I would clone it with jQuery and append it to a visible parent, then destroy it when it was no longer needed.

If parent div has no children showing then show a certain different child div

Yes!

I've came up with a pure CSS solution, because combining selectors is awesome:

Consider the following setup:

.container {  margin: 10px;  border: 1px solid #000;}
.room {  width: 100px;  height: 75px;  background-color: #F00;}
.hidden {  display: none;}
.placeholder {  display: block;}
.room:not(.hidden) ~ .placeholder {  display: none;}

<div class="container">  <div class="room hidden"></div>  <div class="room hidden"></div>  <div class="room hidden"></div>  <div class="room hidden"></div>  <div class="placeholder">No rooms available!</div></div>  <div class="container">  <div class="room hidden"></div>  <div class="room"></div>  <div class="room"></div>  <div class="room hidden"></div>  <div class="placeholder">No rooms available!</div></div>

How to Hide parent DIV if all child Div are hidden (display:none)

Loop through all children dom elements to check for the display style and update the status

$(function(){  var hid = true;
$('button').click(function(){$('.xyz').each(function(index,item){    console.log($(item).css("display"));      if($(item).css("display") != "none") {        hid = false;      }  }).promise().done(function(){    if(hid == true) {      console.log("true");      $('.abc').hide();    }  });})    })

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><div class="abc"><div class="xyz" style="display: none;">{.......}</div><div class="xyz" style="display: none;">{.......}</div><div class="xyz" style="display: none;">{.......}</div><div class="xyz" style="display: none;">{.......}</div><div class="xyz" style="display: none;">{.......}</div></div><button type="button">Click</button>

Show Child Div Within Hidden Parent Div