Find table row by a given cell value and delete that row

Question

I have a table with 3 columns-

<table id="my_list">
    <thead>
    <tr>
        <th>column 1</th>
        <th>column 2</th>
        <th>column 3</th>
    </tr>
    </thead>
    <tr>
        <td>value 1</td>
        <td>value 2</td>
        <td>value 3</td>
    </tr>
</table>

I'm writing a function that searches the table for a given_value and deletes the row that contains it-

function delete_row (given_value) {
    var table_row = $("td").filter(function() {
        return $('#my_list').text() == given_value;
    }).closest("tr");

    // Removing the row from `my_list` table
    table_row.remove();

}

But this is not deleting the row.

Also, I only want to search the text values in column 2 , so if there's a faster way to search the table, that would be great to know too.

Answer 1

I think this is what you are looking for, but you can loop over the td elements and check their text and if you get a match, delete the tr element.

Edit: If you wanted to specify an id, you could add that to the function like such. Then just give the function the id name and what value to look for.

 function delete_row(id, given_value) { var td = $("#" + id + " td"); $.each(td, function(i) { if ($(td[i]).text() === given_value) { $(td[i]).parent().remove(); } }); } delete_row('my_list', 'value 1');

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <table id="my_list"> <thead> <tr> <th>column 1</th> <th>column 2</th> <th>column 3</th> </tr> </thead> <tr> <td>value 1</td> <td>value 2</td> <td>value 3</td> </tr> </table>

Answer 2

The filter function actually passes a couple things as arguments, including the current element. To check the text of that element, rather than the text of "#my_list" , use $(el).text() .

After that, 'trim' the value of the text, to remove the whitespace before and after the text. Otherwise its comparing ' value 2 ' with 'value 2' , and it will not produce a match.

As a side note, the standard within JavaScript is to use camelCase instead of snake_case.

function deleteRow(givenValue) {
  var tableRow = $("td")
    .filter(function(index, el) {
      return (
        $(el) // <-- the <td> element
          .text()
          .trim() === givenValue
      );
    })
    .closest("tr");
  // Removing the row from `my_list` table
  tableRow.remove();
}

Answer 3

Are you sure given_value matches the html text? There's spaces before and after text which may be your problem. Also, make sure table_row is not empty after the filter function.

function delete_row(given_value) {
    var table_row = $("td").filter(function () {
        return $('#my_list').text() == given_value;
    });

    if (table_row.length > 0) {
        // Removing the row from `my_list` table
        table_row.closest("tr").remove();
    } else {
        console.log('nothing matching given_value!')
    }
}

Answer 4

Try this simple code:

function RemoveFromTable(tblID, VALUE){
     $("#"+tblID).find("td:contains('"+VALUE+"')").closest('tr').remove();
}

Call the function as follows:

RemoveFromTable('table ID','value')

Answer 5

You need to match <td> instead of the entire table. Then trim the value to remove any leading/trailing white spaces. Then use the index parameter from the filter function to get the nth <td> element (using eq ) and check its value for the desired value, and then remove it.

function delete_row (given_value) {
    var table_row = $("td").filter(function(idx) {
        return $("td").eq(idx).text().trim() == given_value;
    });

    // Removing the row from `my_list` table
    table_row.remove();

}

I would also suggest to set the value to be an empty string so as to not disrupt the structure of the table.