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

I have HTML which looks like this:

<table >
  <tbody id="number">
    <tr >delete</tr>
    <tr>delete</tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td >1</td>
    </tr>
    <tr>delete</tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td >1</td>
    </tr>
    <tr>
      <td>123456789</td>
      <td >1</td>
    </tr>
    <tr>delete</tr>
    <tr>delete</tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td >1</td>
    </tr>
    <tr>delete</tr>
    <tr>delete</tr>
  </tbody>
</table>

It should be like this:

<table >
  <tbody id="number">
    <tr >delete</tr>
    <tr>
      <td>123456789</td>
      <td >1</td>
    </tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td >1</td>
    </tr>
    <tr>
      <td>123456789</td>
      <td >1</td>
    </tr>
    <tr>delete</tr>
    <tr>
      <td>123456789</td>
      <td >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();

CodePudding user response：

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  border="1">
        <tbody id="number">
        <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 >1</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td>123456789</td><td >1</td></tr>
        <tr><td>123456789</td><td >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 >1</td></tr>
        <tr><td colspan="2">delete</td></tr>
        <tr><td colspan="2">delete</td></tr>
        </tbody>
</table>

CodePudding user response：

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

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

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

If you only want to select <tr> elements that contains <td>deleted</td>, that directly follow another <tr> element that contains <td>deleted</td>. You can do so using the 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 >
  <tbody id="number">
    <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 >1</td>
    </tr>
    <tr><td colspan="2">delete</td></tr>
    <tr><td colspan="2">delete</td></tr>
    <tr>
      <td>123456789</td>
      <td >1</td>
    </tr>
    <tr>
      <td>123456789</td>
      <td >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 >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>