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