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>

I'm assuming you are trying to use input boxes and check the entered text? If so you want to call .val() on the input not .text() on the row. See my answer and let me know if I misinterpreted — Tom G
– Tom G, Commented Jun 22, 2018 at 20:15

Tom G · Accepted Answer · 2018-06-22 20:13:58Z

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>

Dennis Rasmussen · Accepted Answer · 2018-06-22 20:05:05Z

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>

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related