<div class="container-mob"></div>
I have multiple divs like this, some of them are empty (have no children) and all of them have the same class name. I want to remove the empty divs. I've tried:
if ($('.container-mob').is(':empty')) {
$('.container-mob').remove();
}
Is there any way to do this with jQuery or JavaScript?
Try this one: $('.container-mob:empty').remove()
console.log('all empty container',$('.container-mob:empty').length);
$('.container-mob:empty').remove();
console.log('after remove all empty container',$('.container-mob:empty').length);<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="container-mob"></div>
<div class="container-mob"></div>
<div class="container-mob"></div>
<div class="container-mob"></div>
<div class="container-mob">not empty</div>You can simply get all empty div's like and call remove() function on empty div's array
HTML:
<div class="block"></div>
<div class="block"></div>
<div class="block"></div>
<div class="block">Data</div>
<div class="block"></div>
<div class="block">Data</div>
JQuery:
$(".block:empty").remove()