how to remove empty div

Question

 $('.custompsps').each(function(i, obj) { var $this = $(this); var $items = $this.find(".custom_blank_wrapper") $.each($items, function(n, e) { ($items).(".custom_blank"): is blank or not }); });

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>

Answer 1

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; }

Answer 2

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();
    }
 }
 
});

Answer 3

  $('.custompsps').each(function(i, obj)  {
    var $this = $(this);
    var $items = $this.find(".custom_blank_wrapper");
    var found_tag = false;
    $.each($items, function(n, e)
    {
      if( !$items.children().text().trim() == "" ) {

      }else{
        found_tag = true;
        $items.children().remove();
      }
    });      

  });

Answer 4

Create a special selector (emptyChildren)

You can create a special selector for this:

$.extend(jQuery.expr[':'], {  
  emptyChildren: function (el, index, selector) {
    var childClass = selector[3];
    var element = $(el);
    var areAllChildrenEmpty = true;
    element.find(childClass).each(function(){
        if(!$(this).is(":empty")) {
            areAllChildrenEmpty = false;
            return;
        }
    });
    return areAllChildrenEmpty;
  }
});

Usage

Now you can use the selector as follows:

$(".custom_blank_wrapper:emptyChildren(.custom_blank)").remove();

Complete example

<script
  src="https://code.jquery.com/jquery-3.6.0.min.js"
  integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4="
  crossorigin="anonymous"></script>

<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>

<script>
$.extend(jQuery.expr[':'], {  
  emptyChildren: function (el, index, selector) {
    var childClass = selector[3];
    var element = $(el);
    var areAllChildrenEmpty = true;
    element.find(childClass).each(function(){
        if(!$(this).is(":empty")) {
            areAllChildrenEmpty = false;
            return;
        }
    });
    return areAllChildrenEmpty;
  }
});

$(".custom_blank_wrapper:emptyChildren(.custom_blank)").remove();
</script>