remove the duplicate tr based on class (only if consecutive tr have the same class)

user_16290495 0
Viewed 37

There are two tr with the same class "redline" one after the other (that appears consecutively), I want to remove one 'tr' in that.

This is the HTML example

<table id="test"> 
<tr class="redline"><td>bla</td></tr> 
<tr class="redline"><td>bla</td></tr>

<tr class="blueline"><td>bla</td></tr>
<tr class="redline"><td>bla</td></tr>
<tr class="blueline"><td>bla</td></tr>

<tr class="redline"><td>bla</td></tr>
<tr class="redline"><td>bla</td></tr>

<tr class="blueline"><td>bla</td></tr>
</table>

html jquery javascript
2 Answers

Consider using + selector in CSS.

https://www.w3schools.com/cssref/css_selectors.asp

Here is the example:

const dups = document.querySelectorAll('.redline + .redline')
dups.forEach((dup) => {dup.remove()})
<table id="test">
  <tr class="redline">
    <td>bla</td>
  </tr>
  <tr class="redline">
    <td>bla dulplicate</td>
  </tr>
  <tr class="blueline">
    <td>bla</td>
  </tr>
  <tr class="redline">
    <td>bla</td>
  </tr>
  <tr class="blueline">
    <td>bla</td>
  </tr>
  <tr class="redline">
    <td>bla</td>
  </tr>
  <tr class="redline">
    <td>bla dulplicate</td>
  </tr>
  <tr class="blueline">
    <td>bla</td>
  </tr>
</table>

user_51094740 

document.querySelectorAll("#test .redline").forEach(function(element){
    if(document.querySelectorAll("#test .redline").length > 1)
        element.remove()
});
<table id="test">
  <tr class="redline"=1><td>bla</td></tr>
  <tr class="redline"=1><td>bla</td></tr>
  <tr class="blueline"=1><td>bla</td></tr>
  <tr class="redline"=1><td>bla</td></tr>
  <tr class="blueline"=1><td>bla</td></tr>
  <tr class="redline"=1><td>bla</td></tr>
  <tr class="redline"=1><td>bla</td></tr>
  <tr class="blueline"=1><td>bla</td></tr>
</table>

user_93254700
Related