jQuery-如果在表tr中有4 td做某事

Question

I'm trying to remove any tr from table that has less than 4 td inside.

So for example, in this table I want second tr to go away:

HTML

<table>
  <tbdy>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
      <td>4</td>
    </tr>
    <tr>
      <td>1</td>
      <td>2</td>
      <td>3</td>
    </tr>
  </tbody>
</table>

I'm trying with something like this

jQuery

if ($('table tbody tr td').length >= 4) {
  //4 i ok so do nothing
} else {
  $(this).parent("tr").remove();
}

But I getting nowhere with this. Any help?

Answer 1

Use jQuery :has() selector with :not() and :nth-child() pseudo-class selector.

 $('tr:not(:has(:nth-child(4)))').remove() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> 

---

Or alternatively, use filter() method to filter out element only contains td less than 4 and remove.

 $('tr').filter(function() { return $(this).children('td').length < 4; }).remove() 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table> <tbody> <tr> <td>1</td> <td>2</td> <td>3</td> <td>4</td> </tr> <tr> <td>1</td> <td>2</td> <td>3</td> </tr> </tbody> </table> 

Answer 2

This should work:

$('table tbody tr').each(function() {
    var $tr = $(this);
    if ($tr.find('> td').length < 4) {
        $tr.remove();
    }
});

Answer 3

Your structure should be :

 <table>
  <tbody>
    <tr>

And you can select it with :

$('table tbody tr')

To get all tr with less than 4 columns you should loop through them.

Your final code should be :

$('table tbody tr').each(function() {
    var row = $(this);
    if (row.find('td').length < 4) {
        row.remove();
    }
});