How can I remove all rows from a table except rows where first cell value contains a particular stri-CodePudding

//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 >Draft</td>
        <td >2022-11-14 13:34:31</td>
        <td >Muhammad Akhtar</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:40:18</td>
        <td >a</td>
      </tr>
      <tr>
        <td >Under CFF Contracts Manager Review</td>
        <td >2022-11-14 13:41:38</td>
        <td >aa</td>
      </tr>
      <tr>
        <td >Under CFF Compliance Review</td>
        <td >2022-11-14 13:41:43</td>
        <td >aaaa</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:41:48</td>
        <td >bb</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:43:10</td>
        <td >cc</td>
      </tr>
    </tbody>
  </table>
</div>

CodePudding user response：

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 >Draft</td>
        <td >2022-11-14 13:34:31</td>
        <td >Muhammad Akhtar</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:40:18</td>
        <td >a</td>
      </tr>
      <tr>
        <td >Under CFF Contracts Manager Review</td>
        <td >2022-11-14 13:41:38</td>
        <td >aa</td>
      </tr>
      <tr>
        <td >Under CFF Compliance Review</td>
        <td >2022-11-14 13:41:43</td>
        <td >aaaa</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:41:48</td>
        <td >bb</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:43:10</td>
        <td >cc</td>
      </tr>
    </tbody>
  </table>
</div>

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

CodePudding user response：

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 >Draft</td>
        <td >2022-11-14 13:34:31</td>
        <td >Muhammad Akhtar</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:40:18</td>
        <td >a</td>
      </tr>
      <tr>
        <td >Under CFF Contracts Manager Review</td>
        <td >2022-11-14 13:41:38</td>
        <td >aa</td>
      </tr>
      <tr>
        <td >Under CFF Compliance Review</td>
        <td >2022-11-14 13:41:43</td>
        <td >aaaa</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:41:48</td>
        <td >bb</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:43:10</td>
        <td >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 >Draft</td>
        <td >2022-11-14 13:34:31</td>
        <td >Muhammad Akhtar</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:40:18</td>
        <td >a</td>
      </tr>
      <tr>
        <td >Under CFF Contracts Manager Review</td>
        <td >2022-11-14 13:41:38</td>
        <td >aa</td>
      </tr>
      <tr>
        <td >Under CFF Compliance Review</td>
        <td >2022-11-14 13:41:43</td>
        <td >aaaa</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:41:48</td>
        <td >bb</td>
      </tr>
      <tr>
        <td >Revisions Required – CM</td>
        <td >2022-11-14 13:43:10</td>
        <td >cc</td>
      </tr>
    </tbody>
  </table>
</div>

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