harshavmb harshavmb - 2 months ago 6
HTML Question

Deleting duplicate adjacent td elements using jquery

I've the html code as shown below.

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


In the above html code, there are few duplicate components present in adjacent properties column. Is there a way we can identify those duplicate components from properties column and delete them?

In the above example, two components
CatalogTools
and
InventoryManager
are present in properties column. Because of this, their respective properties have moved to an adjacent column on the right side.

The above html code might look faulty as it is generated from server, so I want to tidy up with jquery.

Eventually, I'm looking for an html as shown in this screenshot.

Expected table data

If you need some more details, please do let me know.

Thanks in advance.

Answer

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>