Удаление дубликатов смежных элементов td с помощью jquery

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>