skip to Main Content
//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>

2

Answers


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

    1. Loop over all first cells, checking for the string, and mark its parent row with a temporary class.
    2. Remove all unmarked rows except the first (heading) row.
    3. 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>
    Login or Signup to reply.
  2. 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>
    Login or Signup to reply.
Please signup or login to give your own answer.
Back To Top
Search