How can I remove all rows from a table except rows where first cell value contains a particular string? - Jquery

KarimAli
November 14, 2022
148 views
0 votes
2 Answers

//Code that I have tried but it doesnt work:
$('#historyOfStatus table td').not(':contains("Revisions Required – CM")').parents("tr").remove();

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<div id="historyOfStatus">
  <table>
    <tbody>
      <tr>
        <th>Value</th>
        <th>Date Time</th>
        <th>By</th>
      </tr>
      <tr>
        <td class="Data1">Draft</td>
        <td class="Data1">2022-11-14 13:34:31</td>
        <td class="Data1">Muhammad Akhtar</td>
      </tr>
      <tr>
        <td class="Data1">Revisions Required – CM</td>
        <td class="Data1">2022-11-14 13:40:18</td>
        <td class="Data1">a</td>
      </tr>
      <tr>
        <td class="Data2">Under CFF Contracts Manager Review</td>
        <td class="Data2">2022-11-14 13:41:38</td>
        <td class="Data2">aa</td>
      </tr>
      <tr>
        <td class="Data1">Under CFF Compliance Review</td>
        <td class="Data1">2022-11-14 13:41:43</td>
        <td class="Data1">aaaa</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:41:48</td>
        <td class="Data2">bb</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:43:10</td>
        <td class="Data2">cc</td>
      </tr>
    </tbody>
  </table>
</div>

Tags: html jquery

Answers

Here’s a quick end-of-day approach.

Loop over all first cells, checking for the string, and mark its parent row with a temporary class.
Remove all unmarked rows except the first (heading) row.
Remove the temporary classes.

Of course, you could avoid adding classes to the DOM by collecting the elements in an array or whatever. This was quick.

$('#historyOfStatus td:first-child:contains("Revisions Required – CM")')
  .closest("tr")
  .addClass('keeper');

$('#historyOfStatus tr').not('.keeper').not(':first-child').remove();
$('#historyOfStatus tr').removeClass('keeper');

<div id="historyOfStatus">
  <table>
    <tbody>
      <tr>
        <th>Value</th>
        <th>Date Time</th>
        <th>By</th>
      </tr>
      <tr>
        <td class="Data1">Draft</td>
        <td class="Data1">2022-11-14 13:34:31</td>
        <td class="Data1">Muhammad Akhtar</td>
      </tr>
      <tr>
        <td class="Data1">Revisions Required – CM</td>
        <td class="Data1">2022-11-14 13:40:18</td>
        <td class="Data1">a</td>
      </tr>
      <tr>
        <td class="Data2">Under CFF Contracts Manager Review</td>
        <td class="Data2">2022-11-14 13:41:38</td>
        <td class="Data2">aa</td>
      </tr>
      <tr>
        <td class="Data1">Under CFF Compliance Review</td>
        <td class="Data1">2022-11-14 13:41:43</td>
        <td class="Data1">aaaa</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:41:48</td>
        <td class="Data2">bb</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:43:10</td>
        <td class="Data2">cc</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Here’s an ugly on-liner which preserves the heading row. I like the readability of the one above better. You could simplify by putting your heading row properly in a thead element.

$('#historyOfStatus tr:not(:first-child) td:first-child:not(:contains("Revisions Required – CM"))')
  .closest("tr").remove();

<div id="historyOfStatus">
  <table>
    <tbody>
      <tr>
        <th>Value</th>
        <th>Date Time</th>
        <th>By</th>
      </tr>
      <tr>
        <td class="Data1">Draft</td>
        <td class="Data1">2022-11-14 13:34:31</td>
        <td class="Data1">Muhammad Akhtar</td>
      </tr>
      <tr>
        <td class="Data1">Revisions Required – CM</td>
        <td class="Data1">2022-11-14 13:40:18</td>
        <td class="Data1">a</td>
      </tr>
      <tr>
        <td class="Data2">Under CFF Contracts Manager Review</td>
        <td class="Data2">2022-11-14 13:41:38</td>
        <td class="Data2">aa</td>
      </tr>
      <tr>
        <td class="Data1">Under CFF Compliance Review</td>
        <td class="Data1">2022-11-14 13:41:43</td>
        <td class="Data1">aaaa</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:41:48</td>
        <td class="Data2">bb</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:43:10</td>
        <td class="Data2">cc</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

It can also be done with this one-liner:

$("#historyOfStatus table tr:nth-child(n+2)").filter(function(){return $("td:first",this).text()!="Revisions Required – CM";}).remove()

<div id="historyOfStatus">
  <table>
    <tbody>
      <tr>
        <th>Value</th>
        <th>Date Time</th>
        <th>By</th>
      </tr>
      <tr>
        <td class="Data1">Draft</td>
        <td class="Data1">2022-11-14 13:34:31</td>
        <td class="Data1">Muhammad Akhtar</td>
      </tr>
      <tr>
        <td class="Data1">Revisions Required – CM</td>
        <td class="Data1">2022-11-14 13:40:18</td>
        <td class="Data1">a</td>
      </tr>
      <tr>
        <td class="Data2">Under CFF Contracts Manager Review</td>
        <td class="Data2">2022-11-14 13:41:38</td>
        <td class="Data2">aa</td>
      </tr>
      <tr>
        <td class="Data1">Under CFF Compliance Review</td>
        <td class="Data1">2022-11-14 13:41:43</td>
        <td class="Data1">aaaa</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:41:48</td>
        <td class="Data2">bb</td>
      </tr>
      <tr>
        <td class="Data2">Revisions Required – CM</td>
        <td class="Data2">2022-11-14 13:43:10</td>
        <td class="Data2">cc</td>
      </tr>
    </tbody>
  </table>
</div>

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Please signup or login to give your own answer.

Click here to cancel reply.

How can I remove all rows from a table except rows where first cell value contains a particular string? – Jquery

Answers