Bagaimana untuk mengalih keluar item ul pendua sahaja untuk setiap item li menggunakan html javascript

Question

Saya memaparkan struktur navigasi yang dijana secara dinamik. Setiap lokasi mempunyai jenis kedai yang dijana daripada kedai lokasi tersebut.

Saya perlu mengalih keluar pendua untuk setiap lokasi supaya barangan runcit boleh muncul di kedua-dua lokasi. Saya mencuba penyelesaian jquery biasa di bawah yang mengalih keluar pendua tetapi ia menyebabkan setiap storetype muncul di satu lokasi sahaja.

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

Anda boleh melakukan ini:

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

Ini akan melihat setiap .sub-menu dan lihat jika terdapat "li" dengan teks yang sama, dan alih keluar pendua.

Demo

$("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