I want to remove empty div of custompsps div which has all div empty how can i remove it custompsps which has empty tag and filled tag should not be affected i think i need to run two loops for it but i have do idea how to achieve it i know is is simple I am stuck her so can someone help me with this issue

<div class="custompsps">
    <div class="ProductItem">
        <div class="custom_blank_wrapper">
            <div class="custom_blank"></div>
            <div class="custom_blank">new</div>
            <div class="custom_blank">new</div>
        </div>
    </div>
    <div class="ProductItem">
        <div class="ProductItem">
            <div class="custom_blank_wrapper">
                <div class="custom_blank"></div>
                <div class="custom_blank">new</div>
                <div class="custom_blank">new</div>
            </div>
        </div>
    </div>
    <div class="ProductItem">
        <div class="ProductItem">
            <div class="custom_blank_wrapper">
                <div class="custom_blank"></div>
                <div class="custom_blank">new</div>
                <div class="custom_blank">new</div>
            </div>
        </div>
    </div>
    <div class="ProductItem">
        <div class="ProductItem">
            <div class="custom_blank_wrapper">
                <div class="custom_blank"></div>
                <div class="custom_blank"></div>
                <div class="custom_blank"></div>
            </div>
        </div>
    </div>
</div>
<div class="custompsps">
    <div class="ProductItem">
        <div class="custom_blank_wrapper">
            <div class="custom_blank"></div>
            <div class="custom_blank"></div>
            <div class="custom_blank"></div>
        </div>
    </div>
    <div class="ProductItem">
        <div class="ProductItem">
            <div class="custom_blank_wrapper">
                <div class="custom_blank"></div>
                <div class="custom_blank"></div>
                <div class="custom_blank"></div>
            </div>
        </div>
    </div>
    <div class="ProductItem">
        <div class="ProductItem">
            <div class="custom_blank_wrapper">
                <div class="custom_blank"></div>
                <div class="custom_blank"></div>
                <div class="custom_blank"></div>
            </div>
        </div>
    </div>
    <div class="ProductItem">
        <div class="ProductItem">
            <div class="custom_blank_wrapper">
                <div class="custom_blank"></div>
                <div class="custom_blank"></div>
                <div class="custom_blank"></div>
            </div>
        </div>
    </div>
</div>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

Maybe this can help you? https://css-tricks.com/almanac/selectors/e/empty/

span:empty {
  display: none;
}

If you can write code, it is better to add an additional class like empty and set style.

.empty { display: none; }

CodePudding user response：

Use this following code which will remove all empty div under 'custompsps' class

$(document).ready(function(){
 var divList =$(".custompsps").find('div');
 for( i=0; i<=divList.length; i  )
 {
    if($(divList[i]).is(':empty')){
      $(divList[i]).remove();
    }
 }
 
});