在ul列表中删除重复的li

Question

I have a ul list in where I dynamically display several li's from a file. Some of them appear to have the same tag, so I want to remove them an leave only one of them:

I have this:

    <ul id="dealers-ul" data-next="#branches-ul">
<li class="select-option"><input type="radio" name="choice" id="344410" value="Barcelona Premium"><label for=" 344410 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343594" value="Barcelona Premium"><label for=" 343594 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343584" value="Barcelona Premium"><label for=" 343584 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="344444" value="Barcelona Premium"><label for=" 344444 "> Barcelona Premium</label></li>
<li class="select-option"><input type="radio" name="choice" id="343882" value="Ibericar Cadí"><label for=" 343882 "> Ibericar Cadí</label></li>
<li class="select-option"><input type="radio" name="choice" id="343640" value="Ibericar Cadí"><label for=" 343640 "> Ibericar Cadí</label></li>
<li class="select-option"><input type="radio" name="choice" id="343856" value="Motor Munich"><label for=" 343856 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="343831" value="Motor Munich"><label for=" 343831 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="344363" value="Motor Munich"><label for=" 344363 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="343902" value="Motor Munich"><label for=" 343902 "> Motor Munich</label></li>
<li class="select-option"><input type="radio" name="choice" id="344450" value="Nürburgring"><label for=" 344450 "> Nürburgring</label></li>
<li class="select-option"><input type="radio" name="choice" id="344421" value="Pruna Motor"><label for=" 344421 "> Pruna Motor</label></li>
<li class="select-option"><input type="radio" name="choice" id="343628" value="Pruna Motor"><label for=" 343628 "> Pruna Motor</label></li>
<li class="select-option"><input type="radio" name="choice" id="343647" value="Sitjas"><label for=" 343647 "> Sitjas</label></li>
<li class="select-option"><input type="radio" name="choice" id="343892" value="Tallcar"><label for=" 343892 "> Tallcar</label></li>
</ul>

And I only want 1 of Barcelona Premium, one of Ibericar Cadí, one of Motor Munich, one of Pruna...

Answer 1

It would perhaps be better to not add the repeated items to begin with. This code will remove the repeated items.

 var liText = '', liList = $('#dealers-ul li'), listForRemove = []; $(liList).each(function() { var text = $(this).text(); if (liText.indexOf('|' + text + '|') == -1) liText += '|' + text + '|'; else listForRemove.push($(this)); }); $(listForRemove).each(function() { $(this).remove(); }); 

 <ul id="dealers-ul" data-next="#branches-ul"> <li class="select-option"> <input type="radio" name="choice" id="344410" value="Barcelona Premium"> <label for=" 344410 "> Barcelona Premium</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343594" value="Barcelona Premium"> <label for=" 343594 "> Barcelona Premium</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343584" value="Barcelona Premium"> <label for=" 343584 "> Barcelona Premium</label> </li> <li class="select-option"> <input type="radio" name="choice" id="344444" value="Barcelona Premium"> <label for=" 344444 "> Barcelona Premium</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343882" value="Ibericar Cadí"> <label for=" 343882 "> Ibericar Cadí</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343640" value="Ibericar Cadí"> <label for=" 343640 "> Ibericar Cadí</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343856" value="Motor Munich"> <label for=" 343856 "> Motor Munich</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343831" value="Motor Munich"> <label for=" 343831 "> Motor Munich</label> </li> <li class="select-option"> <input type="radio" name="choice" id="344363" value="Motor Munich"> <label for=" 344363 "> Motor Munich</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343902" value="Motor Munich"> <label for=" 343902 "> Motor Munich</label> </li> <li class="select-option"> <input type="radio" name="choice" id="344450" value="Nürburgring"> <label for=" 344450 "> Nürburgring</label> </li> <li class="select-option"> <input type="radio" name="choice" id="344421" value="Pruna Motor"> <label for=" 344421 "> Pruna Motor</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343628" value="Pruna Motor"> <label for=" 343628 "> Pruna Motor</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343647" value="Sitjas"> <label for=" 343647 "> Sitjas</label> </li> <li class="select-option"> <input type="radio" name="choice" id="343892" value="Tallcar"> <label for=" 343892 "> Tallcar</label> </li> </ul> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 

Source: jquery remove duplicate li

Answer 2

 var listForRemove = []; var listOfUniqe = []; $('#dealers-ul li').each(function () { var text = $(this).text().trim(); if (listOfUniqe.indexOf(text) === -1) listOfUniqe.push(text); else listForRemove.push($(this)); }); $(listForRemove).each(function () { $(this).remove(); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul id="dealers-ul" data-next="#branches-ul"> <li class="select-option"><input type="radio" name="choice" id="344410" value="Barcelona Premium"><label for=" 344410 "> Barcelona Premium</label></li> <li class="select-option"><input type="radio" name="choice" id="343594" value="Barcelona Premium"><label for=" 343594 "> Barcelona Premium</label></li> <li class="select-option"><input type="radio" name="choice" id="343584" value="Barcelona Premium"><label for=" 343584 "> Barcelona Premium</label></li> <li class="select-option"><input type="radio" name="choice" id="344444" value="Barcelona Premium"><label for=" 344444 "> Barcelona Premium</label></li> <li class="select-option"><input type="radio" name="choice" id="343882" value="Ibericar Cadí"><label for=" 343882 "> Ibericar Cadí</label></li> <li class="select-option"><input type="radio" name="choice" id="343640" value="Ibericar Cadí"><label for=" 343640 "> Ibericar Cadí</label></li> <li class="select-option"><input type="radio" name="choice" id="343856" value="Motor Munich"><label for=" 343856 "> Motor Munich</label></li> <li class="select-option"><input type="radio" name="choice" id="343831" value="Motor Munich"><label for=" 343831 "> Motor Munich</label></li> <li class="select-option"><input type="radio" name="choice" id="344363" value="Motor Munich"><label for=" 344363 "> Motor Munich</label></li> <li class="select-option"><input type="radio" name="choice" id="343902" value="Motor Munich"><label for=" 343902 "> Motor Munich</label></li> <li class="select-option"><input type="radio" name="choice" id="344450" value="Nürburgring"><label for=" 344450 "> Nürburgring</label></li> <li class="select-option"><input type="radio" name="choice" id="344421" value="Pruna Motor"><label for=" 344421 "> Pruna Motor</label></li> <li class="select-option"><input type="radio" name="choice" id="343628" value="Pruna Motor"><label for=" 343628 "> Pruna Motor</label></li> <li class="select-option"><input type="radio" name="choice" id="343647" value="Sitjas"><label for=" 343647 "> Sitjas</label></li> <li class="select-option"><input type="radio" name="choice" id="343892" value="Tallcar"><label for=" 343892 "> Tallcar</label></li> </ul> 

This should do the job :)

Answer 3

hope this is helpful for you

  uniqueLi = {}; $("#dealers-ul li").each(function () { var thisVal = $(this).text(); if ( !(thisVal in uniqueLi) ) { uniqueLi[thisVal] = ""; } else { $(this).remove(); } }) console.log(uniqueLi); 

  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <ul id="dealers-ul" data-next="#branches-ul"> <li class="select-option"><input type="radio" name="choice" id="344410" value="Barcelona Premium"><label for=" 344410 "> Barcelona Premium</label></li> <li class="select-option"><input type="radio" name="choice" id="343594" value="Barcelona Premium"><label for=" 343594 "> Barcelona Premium</label></li> <li class="select-option"><input type="radio" name="choice" id="343584" value="Barcelona Premium"><label for=" 343584 "> Barcelona Premium</label></li> <li class="select-option"><input type="radio" name="choice" id="344444" value="Barcelona Premium"><label for=" 344444 "> Barcelona Premium</label></li> <li class="select-option"><input type="radio" name="choice" id="343882" value="Ibericar Cadí"><label for=" 343882 "> Ibericar Cadí</label></li> <li class="select-option"><input type="radio" name="choice" id="343640" value="Ibericar Cadí"><label for=" 343640 "> Ibericar Cadí</label></li> <li class="select-option"><input type="radio" name="choice" id="343856" value="Motor Munich"><label for=" 343856 "> Motor Munich</label></li> <li class="select-option"><input type="radio" name="choice" id="343831" value="Motor Munich"><label for=" 343831 "> Motor Munich</label></li> <li class="select-option"><input type="radio" name="choice" id="344363" value="Motor Munich"><label for=" 344363 "> Motor Munich</label></li> <li class="select-option"><input type="radio" name="choice" id="343902" value="Motor Munich"><label for=" 343902 "> Motor Munich</label></li> <li class="select-option"><input type="radio" name="choice" id="344450" value="Nürburgring"><label for=" 344450 "> Nürburgring</label></li> <li class="select-option"><input type="radio" name="choice" id="344421" value="Pruna Motor"><label for=" 344421 "> Pruna Motor</label></li> <li class="select-option"><input type="radio" name="choice" id="343628" value="Pruna Motor"><label for=" 343628 "> Pruna Motor</label></li> <li class="select-option"><input type="radio" name="choice" id="343647" value="Sitjas"><label for=" 343647 "> Sitjas</label></li> <li class="select-option"><input type="radio" name="choice" id="343892" value="Tallcar"><label for=" 343892 "> Tallcar</label></li> </ul>