使用jquery刪除重複的相鄰td元素

Question

我有如下所示的html代碼。

<div class="serverSet"> 
    <h2>JH Storefront servers</h2> 
    <table border="1" class="CSSTableGenerator" class="myTable"> 
    <tr> 
     <th>Component</th> 
     <th>Properties</th> 
     <th class="servers"> lqwasc10 </th> 
     <th class="servers"> lqwasc11 </th> 
    </tr> 
    <tr> 
     <td class="comps">DeliveryMethodsRepository</td> 
     <td class="props">externalCacheBatchInfoSize</td> 
    <tr/> 
    <tr> 
     <td class="comps">InventoryManager</td> 
     <td class="comps">InventoryManager</td> 
     <td class="props">itemType</td> 
    <tr/> 
    <tr> 
     <td class="comps">InventoryManager</td> 
     <td class="props">maxConcurrentUpdateRetries</td> 
    <tr/> 
    <tr> 
     <td class="comps">CatalogTools</td> 
     <td class="comps">CatalogTools</td> 
     <td class="props">queryASAFFabrics</td> 
    <tr/> 
    <tr> 
     <td class="comps">CatalogTools</td> 
     <td class="props">loggingDebug</td> 
    <tr/> 
    <tr> 
     <td class="comps">CatalogTools</td> 
     <td class="props">outOfStockCode</td> 
    </tr> 
    </table> 
</div> 

在上面的html代碼中，在相鄰屬性列中存在少量重複組件。有沒有一種方法可以從屬性列中識別出這些重複的組件並刪除它們？

在上面的示例中，兩個組件CatalogTools和InventoryManager存在於屬性列中。因此，它們各自的屬性已移至右側的相鄰列。

上面的html代碼可能看起來有問題，因爲它是從服務器生成的，所以我想用jQuery來整理。

最終，我正在尋找如此屏幕截圖所示的html。

如果你需要更多的細節，請不要讓我知道。

在此先感謝。

Answer 1

var dups = $('.comps + .comps') 
 
dups.remove()

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div class="serverSet"> 
 
    <h2>JH Storefront servers</h2> 
 
    <table border="1" class="CSSTableGenerator" class="myTable"> 
 
    <tr> 
 
     <th>Component</th> 
 
     <th>Properties</th> 
 
     <th class="servers"> lqwasc10 </th> 
 
     <th class="servers"> lqwasc11 </th> 
 
    </tr> 
 
    <tr> 
 
     <td class="comps">DeliveryMethodsRepository</td> 
 
     <td class="props">externalCacheBatchInfoSize</td> 
 
     <tr/> 
 
     <tr/> 
 
     <td class="comps">InventoryManager</td> 
 
     <td class="comps">InventoryManager</td> 
 
     <td class="props">itemType</td> 
 
     <tr/> 
 
     <td class="comps">InventoryManager</td> 
 
     <td class="props">maxConcurrentUpdateRetries</td> 
 
     <tr/> 
 
     <tr/> 
 
     <td class="comps">CatalogTools</td> 
 
     <td class="comps">CatalogTools</td> 
 
     <td class="props">queryASAFFabrics</td> 
 
     <tr/> 
 
     <td class="comps">CatalogTools</td> 
 
     <td class="props">loggingDebug</td> 
 
     <tr/> 
 
     <td class="comps">CatalogTools</td> 
 
     <td class="props">outOfStockCode</td> 
 
     <tr/> 
 
     <tr/> 
 
    </tr> 
 
    </tr> 
 
    </table> 
 
</div>