CODEWITHSUNDEEP
javascriptjquery
MK01111000
MK01111000

Reputation: 822

How do I remove a row from a table

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>

Upvotes: 1

Views: 64

Answers (2)

Mohamed-Yousef
Mohamed-Yousef

Reputation: 24001

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

Upvotes: 1

Seethapriyanka Peddada
Seethapriyanka Peddada

Reputation: 590

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>

Upvotes: 1

Related Questions