How do I remove a row from a table

Question

Below code removes the row if it contains an empty cell in the 3rd column.
It makes use of Jquery's fadeOut-method for a nice effect.
Thing is that I can't get the code working without the faeOut method.

I tried $(this).remove(); but that does not work.

 function TT(){ var A = 3; $('table tbody tr td:nth-child(' + A + ')').each(function(index){ var cellValue = $("#tbl tr:eq(" + index + ") td:eq(" + A + ")").text(); if (cellValue.length === 0){ $(this).parents('tr').fadeOut(function(){ $(this).remove(); }); } }); } 

 table { margin: 10px; font-family: arial, sans-serif; border-collapse: collapse; width: 95%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl'> <tr> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> <td>E1</td> <td>F1</td> <td>G1</td> <td>H1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td></td> <td>E2</td> <td>F2</td> <td>G2</td> <td>H2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> <td>D3</td> <td>E3</td> <td>F3</td> <td>G3</td> <td>H3</td> </tr> <tr> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> <td>E4</td> <td>F4</td> <td>G4</td> <td>H4</td> </tr> <tr> <td>A5</td> <td>B5</td> <td>C5</td> <td></td> <td>E5</td> <td>F5</td> <td>G5</td> <td>H5</td> </tr> <tr> <td>A6</td> <td>B6</td> <td>C6</td> <td></td> <td>E6</td> <td>F6</td> <td>G6</td> <td>H6</td> </tr> <tr> <td>A7</td> <td>B7</td> <td>C7</td> <td>D7</td> <td>E7</td> <td>F7</td> <td>G7</td> <td>H7</td> </tr> <tr> <td>A8</td> <td>B8</td> <td>C8</td> <td></td> <td>E8</td> <td>F8</td> <td>G8</td> <td>H8</td> </tr> <tr> <td>A9</td> <td>B9</td> <td>C9</td> <td>D9</td> <td>E9</td> <td>F9</td> <td>G9</td> <td>H9</td> </tr> <tr> <td>A10</td> <td>B10</td> <td>C10</td> <td>D10</td> <td>E10</td> <td>F10</td> <td>G10</td> <td>H10</td> </tr> <tr> <td>A11</td> <td>B11</td> <td>C11</td> <td>D11</td> <td>E11</td> <td>F11</td> <td>G11</td> <td>H11</td> </tr> </table> </br> <button type="button" onclick="TT()">Click Me!</button> 

Answer 1

Multiple times you are querying “table” .which is not required. Only the first loop to iterate through all 3rd column elements is sufficient to find out if the cell is empty and to remove the complete row.

 function TT(){ var A = 4; $('table tbody tr td:nth-child(' + A + ')') .each(function(index){ if($(this).text()=="" ) {$(this).parent().remove();} }); } 

 table { margin: 10px; font-family: arial, sans-serif; border-collapse: collapse; width: 95%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl'> <tr> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> <td>E1</td> <td>F1</td> <td>G1</td> <td>H1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td></td> <td>E2</td> <td>F2</td> <td>G2</td> <td>H2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> <td>D3</td> <td>E3</td> <td>F3</td> <td>G3</td> <td>H3</td> </tr> <tr> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> <td>E4</td> <td>F4</td> <td>G4</td> <td>H4</td> </tr> <tr> <td>A5</td> <td>B5</td> <td>C5</td> <td>D5</td> <td>E5</td> <td>F5</td> <td>G5</td> <td>H5</td> </tr> <tr> <td>A6</td> <td>B6</td> <td>C6</td> <td>D6</td> <td>E6</td> <td>F6</td> <td>G6</td> <td>H6</td> </tr> </table> </br> <button type="button" onclick="TT()">Click Me!</button> 

Answer 2

No need to use .each() you can just use .filter()

 function TT(){ var A = 3; $('table tbody tr').filter(function(){ return $('td:eq('+ A +')' , this).text() == ''; // good to use `.text().trim()` to avoid any white-spaces }).remove(); } 

 table { margin: 10px; font-family: arial, sans-serif; border-collapse: collapse; width: 95%; } td, th { border: 1px solid #dddddd; text-align: left; padding: 8px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <table id='tbl'> <tr> <td>A1</td> <td>B1</td> <td>C1</td> <td>D1</td> <td>E1</td> <td>F1</td> <td>G1</td> <td>H1</td> </tr> <tr> <td>A2</td> <td>B2</td> <td>C2</td> <td></td> <td>E2</td> <td>F2</td> <td>G2</td> <td>H2</td> </tr> <tr> <td>A3</td> <td>B3</td> <td>C3</td> <td>D3</td> <td>E3</td> <td>F3</td> <td>G3</td> <td>H3</td> </tr> <tr> <td>A4</td> <td>B4</td> <td>C4</td> <td>D4</td> <td>E4</td> <td>F4</td> <td>G4</td> <td>H4</td> </tr> <tr> <td>A5</td> <td>B5</td> <td>C5</td> <td></td> <td>E5</td> <td>F5</td> <td>G5</td> <td>H5</td> </tr> <tr> <td>A6</td> <td>B6</td> <td>C6</td> <td></td> <td>E6</td> <td>F6</td> <td>G6</td> <td>H6</td> </tr> <tr> <td>A7</td> <td>B7</td> <td>C7</td> <td>D7</td> <td>E7</td> <td>F7</td> <td>G7</td> <td>H7</td> </tr> <tr> <td>A8</td> <td>B8</td> <td>C8</td> <td></td> <td>E8</td> <td>F8</td> <td>G8</td> <td>H8</td> </tr> <tr> <td>A9</td> <td>B9</td> <td>C9</td> <td>D9</td> <td>E9</td> <td>F9</td> <td>G9</td> <td>H9</td> </tr> <tr> <td>A10</td> <td>B10</td> <td>C10</td> <td>D10</td> <td>E10</td> <td>F10</td> <td>G10</td> <td>H10</td> </tr> <tr> <td>A11</td> <td>B11</td> <td>C11</td> <td>D11</td> <td>E11</td> <td>F11</td> <td>G11</td> <td>H11</td> </tr> </table> </br> <button type="button" onclick="TT()">Click Me!</button> 

Note: parent() , parents() , closest() all of those should work if you start from <td> .. but for me a simple thing is to start from the <tr> not from the <td>

Another note: :nth-child(index) index starts from 1 .. and :eq(index) starts from 0