Remove row if contains specific string except one between rows - Jquery

DREAM
September 28, 2022
162 views
0 votes
2 Answers

I have HTML which looks like this:

<table class="table">
  <tbody id="number">
    <tr class="is-first">delete</tr>
    <tr>delete</tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr>delete</tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr>delete</tr>
    <tr>delete</tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr>delete</tr>
    <tr>delete</tr>
  </tbody>
</table>

It should be like this:

<table class="table">
  <tbody id="number">
    <tr class="is-first">delete</tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
  </tbody>
</table>

I want to remove entries row if contains specific string except one between rows. I need Javascript or jQuery code to solve this problem.

I tried this code but it removes all of the table.

$('.table tr:contains("delete")').parent().remove();

Tags: javascript jquery

Answers

As others said in comment,first you need to put text inside td instead of tr

For your question,the quick way is to filter the tr that needs to be deleted,then we delete it one by one

let deleted =[]
$(".table > tbody > tr > td:contains('delete')").each((index,ele) =>{
  if($(ele).parent().prev().text()=="delete"){
     deleted.push(ele)
   }
})

deleted.forEach(e =>{
  $(e).remove()
})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<table class="table" border="1">
        <tbody id="number">
        <tr class="is-first"><td colspan="2">delete</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td>123456789</td><td class="is-number">1</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td>123456789</td><td class="is-number">1</td></tr>
        <tr><td>123456789</td><td class="is-number">1</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td>123456789</td><td class="is-number">1</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td colspan="2">delete</td></tr>
        </tbody>
</table>

This answer assumes a correct table structure to start with. eg. delete should be wrapped in a <td> element. With that out of the way, let’s get to the answer.

You can select all <tr> elements that contains <td>delete</td> with:

$('tr:has(td:contains("delete"))')

If you only want to select <tr> elements that contains <td>delete</td>, that directly follow another <tr> element that contains <td>delete</td>. You can do so using the adjacent sibling combinator (+).

$('tr:has(td:contains("delete")) + tr:has(td:contains("delete"))')

function cleanTable() {
  $('tr:has(td:contains("delete")) + tr:has(td:contains("delete"))').remove();
}

document.querySelector("button").addEventListener("click", cleanTable);

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

<button type="button">clean table</button>

<table class="table">
  <tbody id="number">
    <tr class="is-first"><td colspan="2">delete</td></tr>
    <tr><td colspan="2">delete</td></tr>
    <tr><td colspan="2">delete</td></tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr><td colspan="2">delete</td></tr>
    <tr><td colspan="2">delete</td></tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr><td colspan="2">delete</td></tr>
    <tr><td colspan="2">delete</td></tr>
    <tr><td colspan="2">delete</td></tr>
    <tr>
      <td>123456789</td>
      <td class="is-number">1</td>
    </tr>
    <tr><td colspan="2">delete</td></tr>
    <tr><td colspan="2">delete</td></tr>
  </tbody>
</table>

<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.

Remove row if contains specific string except one between rows – Jquery

Answers