Comment supprimer uniquement les éléments ul en double pour chaque élément li à l'aide de javascript html

Question

J'affiche une structure de navigation générée dynamiquement. Chaque emplacement possède un type de magasin généré à partir des magasins de cet emplacement.

Je dois supprimer les doublons pour chaque emplacement afin que les courses puissent apparaître dans les deux emplacements. J'ai essayé la solution jquery courante ci-dessous qui supprime les doublons, mais chaque type de magasin n'apparaît qu'à un seul emplacement.

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

Vous pouvez faire ceci :

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

Cela examinera chacun .sub-menu et verra s'il y a un "li" avec le même texte, et supprimera les doublons.

Démo

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