CODEWITHSUNDEEP
htmljquerycss
Sunny
Sunny

Reputation: 75

how to remove empty div

$('.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>

Upvotes: 0

Views: 786

Answers (3)

Solonl
Solonl

Reputation: 2512

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>

Upvotes: 0

Raju Ahmed
Raju Ahmed

Reputation: 1268

Use this following code which will remove all 'custom_blank_wrapper' div, if it's all child 'custom_blank' div is empty.

$('.custompsps .custom_blank_wrapper').each(function(i, obj)  {
    var customBlankWrapperChild = $(this).children();
    var customBlankWrapperChildCount=customBlankWrapperChild.length;
    var emptyBlankWrapperChildCount=0;
    for(i=0; i<customBlankWrapperChild.length;i++){      
       /* This condition will check each div with class name 'custom_blank' is blank or not */
       if(customBlankWrapperChild[i].className=="custom_blank" && customBlankWrapperChild[i].childElementCount<1 && customBlankWrapperChild[i].innerText==''){
          emptyBlankWrapperChildCount=emptyBlankWrapperChildCount+1;
       }       
    }
    //It will check is all 'custom_blank' div is empty or not, under the current 'custom_blank_wrapper' class.
    if(customBlankWrapperChildCount==emptyBlankWrapperChildCount){
      /* if you want to delete only 'custom_blank_wrapper' div */
        $(this).remove();
     /*if you want to delete parent of current 'custom_blank_wrapper' div */
        // $(this).parent().remove();
     /*if you want to delete parent of parent ,of  the current 'custom_blank_wrapper' div*/
         //$(this).parent().parent().remove();
    } 
 });

Upvotes: 1

Danyil Kolosov
Danyil Kolosov

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

Upvotes: 0

Related Questions