JSFiddle - React, Tailwind, and code Playground
HTML
<ul class="list">
<li class="element level-1">
<div class="top">
<div class="content">dsssd</div>
<div class="count"></div>
<ul class="elements">
<li class="element level-2">
<div class="parent">
<div class="content">assd</div>
<ul class="elements">
<li class="element level-3">
<div id="dssd">
<div class="content">dssd</div>
</div>
</li>
<li class="element level-3">
<div id="fddd">
<div class="content">gfddg</div>
</div>
</li>
<li class="element level-3">
<div id="fdff">
<div class="content">ddee</div>
</div>
</li>
<li class="element level-3">
<div id="gfgggf">
<div class="content">hghg</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-2">
<div id="gfgf" class="parent">
<div class="content">eeer</div>
</div>
</li>
</ul>
</div>
</li>
<li class="element level-1">
<div id="hjjh" class="top">
<div class="content">hjhj</div>
<div class="count"></div>
<ul class="elements">
<li class="element level-2">
<div id="yuyuu" class="parent">
...
CSS
.elements {
clear: both;
}
.level-1 {
margin-bottom: 10px;
}
.count {
background-color: pink; float: left; padding: 5px;}
JavaScript
$('.list .count').text(function() {
var length = $(this).closest('.count')
.next('.elements')
.find('.element')
.length
;
if (length > 1) {
return length;
}
else
{
$(this).remove();
}
});