Delete HTML table row elements based on duplicate values in column with javascript?

Question

I have a table and i'm trying to delete rows if any values in the first column are identical. how could i achieve this using javascript or jquery?

         
  $("table tr").each(function () {
  var tdText = $(this).text();

  $("table tr")
      .filter(function () {
          return tdText == $(this).text();
      })
      .not(":first")
      .remove();

  });

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
      <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description</th>
      <th>Material</th>
      <th>Style</th>
      </tr>
  </thead>
  <tbody>
        <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          </tr>
        <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
        </tr>
            <tr>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
          <td><input></td>
        </tr>
      </tbody>
    </table>

Answer 1

function removeDuplicates()  {
  var tableRows = $('#myTable').find("tbody tr");
  var seens = [];
  for(var i = 0; i < tableRows.length; i++) {
    var tRow = $(tableRows[i]);
    var cell1Content = tRow.find("td:first-child input").val();
    if(seens.indexOf(cell1Content) != -1) {
      tRow.remove();
    } else {
      seens.push(cell1Content);
    }
  }
}

function addRow()  {
  $('#myTable').find("tbody").append(['<tr>',
                                      '    <td><input></td>',
                                      '    <td><input></td>',
                                      '    <td><input></td>',
                                      '    <td><input></td>',
                                      '    <td><input></td>',
                                      '  </tr>'].join(""));
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table id="myTable">
  <thead>
      <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description</th>
      <th>Material</th>
      <th>Style</th>
      </tr>
  </thead>
  <tbody>
    <tr>
      <td><input value="1"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      </tr>
    <tr>
      <td><input value="3"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="1"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="2"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="3"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="4"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
     <tr>
      <td><input value="5"></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
      <td><input></td>
    </tr>
  </tbody>
</table>
<div>
  <button onclick="addRow()">Add Row</button>
  <button onclick="removeDuplicates()">Remove Duplicates</button>
</div>

Answer 2

You'll have to iterate through the rows and then remove the duplicates for every row you go through.

$('table').find('tr').each(function(){
  const $row = $(this);
  $row.nextAll('tr').each(function(){
    const $next = $(this);
    if($row.find('td:first').text() == $next.find('td:first').text()) {
      $next.remove();
    }
  })
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
  <thead>
    <tr>
      <th>Product Code</th>
      <th>Item Name</th>
      <th>Long Description</th>
      <th>Material</th>
      <th>Style</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
    <tr>
      <td>A</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>B</td>
      <td>B</td>
      <td>B</td>
      <td>B</td>
      <td>B</td>
      <td>B</td>
    </tr>
    <tr>
      <td>A</td>
      <td>B</td>
      <td>C</td>
      <td>D</td>
      <td>E</td>
      <td>F</td>
    </tr>
    <tr>
      <td>B</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
    <tr>
      <td>C</td>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
      <td>5</td>
    </tr>
  </tbody>
</table>