如何使用 javascript html 僅刪除每個 ul 項目的重複 li 項目

Question

我顯示了一個動態產生的導航結構。每個位置都有從該位置的商店產生的商店類型。

我需要刪除每個位置的重複項，以便雜貨可以出現在兩個位置。我嘗試了下面常見的 jquery 解決方案，該解決方案刪除了重複項，但它導致每個 storetype 僅出現在一個位置。

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>

Answer 1

你可以這樣做：

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

這將查看每個 .sub-menu 並查看是否存在具有相同文字的“li”，並刪除重複的內容。

示範

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

sssccc

  
Location 1
    

      
groceries
      
cakes
      
motor spares
      
groceries
    
  
  
Location 2
    

      
groceries
      
motor spares
      
motor spares
      
groceries