在ul列表中刪除重復的li

Question

我有一個ul列表，在其中我動態顯示文件中的多個li。 其中一些標簽似乎具有相同的標記，因此我只想刪除其中一個標簽即可：

我有這個：

    <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>

我只想要巴塞隆納Premium的1個，伊比利亞卡迪（IbericarCadí）的一個，慕尼黑汽車的一個，普魯納的一個...

Answer 1

最好不要添加重復的項目。 此代碼將刪除重復的項目。

 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> 

資料來源： jquery刪除重復的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> 

這應該可以做:)

Answer 3

希望這對您有幫助

  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>