jQuery: how to empty reputed table tds content that have same attribute value but keep the content o-CodePudding

I have the following table structure (please find it below) and I am looking to empty duplicated content of only tds with class check that have same value of attribute value but keep the first added td.

The table rows are added based on a slider value change event in some nested loops (hence duplicates and so I am emptying outside the loops and after rows are added but still inside some dynamic code).

In the shown table, the desired result after filtering should include only the content of one td with value = "1", one td with value = "2" and one td with value = "3". I tried the solution shown on the table code below but it did not give correct results. I also tried this and this but the result is not exactly what I am looking for. Thanks for any ideas.

List item

jQuery snippets:

var seen = {};
$('.check').each(function() {
  var txt = $(this).attr('value');
  if (seen[txt])
    $(this).empty();
  else
    seen[txt] = true;
});

var map = {};
$(".check").each(function() {
  var value = $(this).attr('value');
  if (map[value] == null) {
    map[value] = true;
  } else {
    $(this).empty();
  }
});

var seen = '';
$('.check').each(function() {
  var see = $(this).attr('value');
  if (seen.match(see)) {
    $(this).empty();
  } else {
    seen = seen   $(this).text();
  }
});

var seen = {};
$('.check').each(function() {
  var $this = $(this);
  if (seen[$this.attr('value')]) {
    $this.closest("tr").next("tr").find("td.check").empty();
  } else {
    seen = seen   $this.text();
  }
});

var seen = {};
$('.check').each(function() {
  var $this = $(this);
  if (seen[$this.attr('value')]) {
    $this.closest("tr").next("tr").find(".check").empty();
  } else {
    seen[$this.attr('value')] = true;
  }
});

My Table: (Fiddle) (the orders of rows is irrelevant as I want to keep the first added content and remove the content that has same duplicated value of attribute value shown as: empty this)

<!DOCTYPE html>
<html>

<head>
  <style>
    table,
    th,
    td {
      border: 1px solid black;
      border-collapse: collapse;
    }
    
    th,
    td {
      padding: 4px;
    }
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
  <script>
    $(document).ready(function() {
      $("button").click(function() {
        var seen = {};
        $('.check').each(function() {
          var $this = $(this);
          if (seen[$this.attr('value')]) {
            $this.closest("tr").next("tr").find("td.check").empty();
          } else {
            seen[$this.attr('value')] = true;
          }
        });
      });
    });
  </script>
</head>

<body>
  <table>
    <tbody>
      <tr>
        <th>New ID</th>
        <th>Year</th>
        <th>Make</th>
        <th>Model</th>
        <th>Build</th>
        <th>Pay</th>
        <th>Date</th>
        <th>From</th>
        <th>To</th>
        <th>Max</th>
        <th>Used ID</th>
        <th>Year</th>
        <th>Make</th>
        <th>Model</th>
        <th>Name</th>
        <th>Phone</th>
        <th>Cell</th>
        <th>Email</th>
        <th>Address</th>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td  value="1">1<br /><a href="#">View</a></td>
        <td  value="1">text1</td>
        <td  value="1">text1</td>
        <td  value="1">text1</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td  value="2">2<br /><a href="#">View</a></td>
        <td  value="2">text2</td>
        <td  value="2">text2</td>
        <td  value="2">text2</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td  value="1">empty this</td>
        <td  value="1">empty this</td>
        <td  value="1">empty this</td>
        <td  value="1">empty this</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td  value="1">empty this</td>
        <td  value="1">empty this</td>
        <td  value="1">empty this</td>
        <td  value="1">empty this</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td  value="3">3<br /><a href="#">View</a></td>
        <td  value="3">text3</td>
        <td  value="3">text3</td>
        <td  value="3">text3</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
      <tr>
        <td>id</td>
        <td>year</td>
        <td>make</td>
        <td>model</td>
        <td>build</td>
        <td>pay</td>
        <td>date</td>
        <td>from</td>
        <td>to</td>
        <td>max</td>
        <td  value="2">empty this</td>
        <td  value="2">empty this</td>
        <td  value="2">empty this</td>
        <td  value="2">empty this</td>
        <td>name</td>
        <td>phone</td>
        <td>cell</td>
        <td>email</td>
        <td>address</td>
      </tr>
    </tbody>
  </table>
  <br>
  <button>Click</button>
</body>

</html>

CodePudding user response：

Look if this solution can be fine for your needs.

I used a first loop on <tbody> rows (<tr>) and - for each row - a nested loop on <td> elements.

Just a side note about your HTML: table headers shoud stay semantically inside a <thead>, not <tbody>.

$(document).ready(function() {
  $("button").click(function() {
    let seen = [];

    // loop on rows
    $('.table tbody tr').each(function(rowIndex, rowElement) {
      // for each row, loop on tds with value attribute
      $(rowElement).find('td.check[value]').each(function(tdIndex, tdItem) {
        const attrValue = $(tdItem).attr('value'); // check value attribute

        if (!seen.includes(attrValue)) {
          // if attribute value is not present in array, push it
          seen.push(attrValue);

          // and break the tds loop in this row
          return false;
        } else {
          // else empty tds
          $(tdItem).empty();
        }
      })
    })
  })
})

table,
th,
td {
  border: 1px solid black;
  border-collapse: collapse;
}

th,
td {
  padding: 4px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class='table'>
  <thead>
    <tr>
      <th>New ID</th>
      <th>Year</th>
      <th>Make</th>
      <th>Model</th>
      <th>Build</th>
      <th>Pay</th>
      <th>Date</th>
      <th>From</th>
      <th>To</th>
      <th>Max</th>
      <th>Used ID</th>
      <th>Year</th>
      <th>Make</th>
      <th>Model</th>
      <th>Name</th>
      <th>Phone</th>
      <th>Cell</th>
      <th>Email</th>
      <th>Address</th>
    </tr>
  </thead>
  <tbody>

    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td  value="1">1<br /><a href="#">View</a></td>
      <td  value="1">text1</td>
      <td  value="1">text1</td>
      <td  value="1">text1</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td  value="2">2<br /><a href="#">View</a></td>
      <td  value="2">text2</td>
      <td  value="2">text2</td>
      <td  value="2">text2</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td  value="1">empty this</td>
      <td  value="1">empty this</td>
      <td  value="1">empty this</td>
      <td  value="1">empty this</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td  value="1">empty this</td>
      <td  value="1">empty this</td>
      <td  value="1">empty this</td>
      <td  value="1">empty this</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td  value="3">3<br /><a href="#">View</a></td>
      <td  value="3">text3</td>
      <td  value="3">text3</td>
      <td  value="3">text3</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
    <tr>
      <td>id</td>
      <td>year</td>
      <td>make</td>
      <td>model</td>
      <td>build</td>
      <td>pay</td>
      <td>date</td>
      <td>from</td>
      <td>to</td>
      <td>max</td>
      <td  value="2">empty this</td>
      <td  value="2">empty this</td>
      <td  value="2">empty this</td>
      <td  value="2">empty this2</td>
      <td>name</td>
      <td>phone</td>
      <td>cell</td>
      <td>email</td>
      <td>address</td>
    </tr>
  </tbody>
</table>
<button>Click</button>