How to remove TR if there is a specific text inside its TD's in jquery?

Question

I want to remove the TR if its 2nd TD value is similar to another TRs TD value and it's last TD value shouldn't be HIT. And the another scenario is if I have 3 TRs with the same data then 2 of them should be removed and 1 should remain there.

Example:

<table>
<tr>
    <td>ID</td>
    <td>Ref No</td>
    <td>Name</td>
    <td>Result</td>
</tr>

<tr>
   <td>1</td>
   <td>1121</td>
   <td>Joseph</td>
   <td>CLEAR</td>
</tr>

<tr>
   <td>2</td>
   <td>1122</td>
   <td>Mike</td>
   <td>CLEAR</td>
</tr>

<tr>
   <td>3</td>
   <td>1122</td>
   <td>Mike</td>
   <td>CLEAR</td>
</tr>

<tr>
   <td>4</td>
   <td>1122</td>
   <td>Mike</td>
   <td>HIT</td>
</tr>

<tr>
   <td>5</td>
   <td>1123</td>
   <td>Jim</td>
   <td>HIT</td>
</tr>

<tr>
   <td>6</td>
   <td>1124</td>
   <td>James</td>
   <td>CLEAR</td>
</tr>

<tr>
   <td>7</td>
   <td>1124</td>
   <td>James</td>
   <td>CLEAR</td>
</tr>

<tr>
   <td>8</td>
   <td>1124</td>
   <td>James</td>
   <td>CLEAR</td>
</tr>

</table>

What I want:

<table>
<tr>
    <td>ID</td>
    <td>Ref No</td>
    <td>Name</td>
    <td>Result</td>
</tr>

<tr>
   <td>1</td>
   <td>1121</td>
   <td>Joseph</td>
   <td>CLEAR</td>
</tr>    

<tr>
   <td>4</td>
   <td>1122</td>
   <td>Mike</td>
   <td>HIT</td>
</tr>

<tr>
   <td>5</td>
   <td>1123</td>
   <td>Jim</td>
   <td>HIT</td>
</tr>

<tr>
   <td>6</td>
   <td>1124</td>
   <td>James</td>
   <td>CLEAR</td>
</tr>

</table>

Can anybody tell me how to achieve this task?

Any help would be highly appreciated.

Answer 1

So i made this clumsy answer for you. You can check it out in the fiddle here .

EDIT: after some discussion about what should the behaviour be, i updated the fiddle. so now it adds the check if there are any fields in the duplicates that have a "HIT" value in fourth column it will keep the first row with HIT value, otherwise it will keep the first value for each unique second column value.

I am sure there is a better/simpler/more effective way to do this with jQuery, but that is what I came up with. The basic algorithm is this: get all rows and iterate. For each row: find the value in second td (column), check all subsequent rows, fetch the value in second column there and compare them. if they are the same, remove the duplicate row from DOM.

//get the table rows, this should be done with a different selector if there are more tables e.g. with class or id...
$tableRows = $("tr");

//iterate over all elements (rows)
$tableRows.each(function(index, element) {
  var $element = $(element);
  //get the value of the current element
  var currentRowValue = $element.find("td:nth-child(2)").text();

  //check all elements that come after the current element if the value matches, if so, remove the matching element
  for (var i = index + 1; i < $tableRows.length; i++) {
    var $rowToCompare = $($tableRows[i]);
    var valueToCompare = $rowToCompare.find("td:nth-child(2)").text();

    if(valueToCompare === currentRowValue) {
      //remove the duplicate from dom
      //if the second row (the duplicate) has 4th column of "HIT" then keep the second row and remove the first row
      var duplicateRowFourthColumnVal = $rowToCompare.find("td:nth-child(4)").text();
      if(duplicateRowFourthColumnVal == "HIT") {
        $element.remove();
      }
      else {
        $rowToCompare.remove();
      }
    }
  }
});`