I display a dynamically generated navigation structure. Each location has a store type generated from that location's stores.
I need to remove duplicates for each location so groceries can appear in both locations. I tried the common jquery solution below which removes duplicates but it results in each storetype appearing in only one location.
var seen = {};
$("ul#storetypes").find("li").each(function(index, html_obj) {
txt = $(this).text().toLowerCase();
if (seen[txt]) {
$(this).remove();
} else {
seen[txt] = true;
}
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<ul class="menu">
<li>Location 1
<ul id="storetypes" class="sub-menu">
<li>groceries</li>
<li>cakes</li>
<li>motor spares</li>
<li>groceries</li>
</ul>
</li>
<li>Location 2
<ul class="sub-menu">
<li>groceries</li>
<li>motor spares</li>
<li>motor spares</li>
<li>groceries</li>
</ul>
</li>
</ul>
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
You can do this:
$("ul.sub-menu li").each(function(index, html_obj) { if ($(this).prevAll(":contains(" + $(this).text() + ")").length > 0) { $(this).remove(); } });This will look at each
.sub-menuand see if there is a "li" with the same text, and remove the duplicates.Demo