如何使用javascript html删除每个ul项的重复li项

sczxawaw 于 2022-12-09 发布在 Java

关注(0)|答案(3)|浏览(215)

I have a dynamically generated navigation structure shown. Each location has storetypes generated from the stores at the location.
I need to remove duplicates per location so that groceries can appear in both locations. I tried the common jquery solution below which removes duplicates but it results in each storetype appearing only in 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>

Html

来源：https://stackoverflow.com/questions/74698160/how-to-remove-duplicate-li-items-only-for-each-ul-item-using-javascript-html

3条答案

按热度按时间

i7uq4tfw1#

您可以这样做：

$("ul.sub-menu li").each(function(index, html_obj) {
  if ($(this).prevAll(":contains(" + $(this).text() + ")").length > 0) {
    $(this).remove();
  }
});

这将查看每个.sub-menu，并查看是否已经存在具有相同文本的'li'，并删除重复的。