CODEWITHSUNDEEP
jquery
morne
morne

Reputation: 4189

Remove tr from table via tr id

Im trying to remove a tr from a table with jquery

I call it like this where file is a variable containing the id of the tr

$('table .report_table_list tr #'+file).remove();

any reason why it does not work?

table sample

<table id="desktop_tablel" class="patientselect_desktop report_table_list">
    <thead style="overflow-y: scroll; display: table; table-layout: fixed; width: calc(100% - 1px);">
        <tr class="header">
            <th style="width: 300px;" class="header_cell nobreak">Report name</th>
            <th style="width: 125px;" class="header_cell nobreak">Date created</th>
            <th style="width: 30px;" class="header_cell nobreak"></th>
        </tr>
    </thead>

    <tbody id="reportsummary" class="desktop" style="overflow: auto; height: 200px; display: block;">
       <tr id="Ward_Round_Summary-17-01-2018_15-05.html" data-report="Ward_Round_Summary-17-01-2018_15-05.html" class="select data-row  odd">
            <td style="width: 300px;" data-report="Ward_Round_Summary-17-01-2018_15-05.html" class="listing_cell open_report">
                <div class="plCell_desktop">
                    <label>Ward_Round_Summary</label>
                </div>
            </td>
            <td style="width: 125px;" data-report="Ward_Round_Summary-17-01-2018_15-05.html" class="listing_cell open_report">
                <div class="plCell_desktop">
                    <label>17-01-2018 15:05</label>
                </div>
            </td>
            <td style="width: 30px;" class="listing_cell">
                <div class="">
                    <input data-report="Ward_Round_Summary-17-01-2018_15-05.html" type="button" class="removeButton buttons delete_report" value="x">
                </div>
            </td>
        </tr>
    </tbody>
</table>

JQUERY 

function reportDelete(file) {
    var folder = "/reports/process/";
    $.ajax({
        url: '../deleteReport.php',
        data: {'folder':folder,'file' : file },
        success: function (response) {
            console.log("success",file); // file contains -> Ward_Round_Summary-17-01-2018_15-05.html
            $('#'+file).remove(); // does not work
            $('table .report_table_list tr #'+file).remove(); // does not work
        },
        error: function () {

        }
    });
}

Upvotes: 0

Views: 902

Answers (2)

David
David

Reputation: 218827

The space character has a specific meaning in selectors. For example, this selector:

'table .report_table_list'

would be looking for any element with the class report_table_list within a <table> element. But that's not what your HTML has. In your HTML the <table> element itself has that class. Which would be this:

'table.report_table_list'

The same is true of the ID selector as well. Once both are corrected, you get this:

'table.report_table_list tr#'+file

Though, since id is (or should be at least) unique, you can simplify the whole thing to:

'#'+file

Edit: Upon additional debugging, it looks like the selector is also confused by the . character in your file value:

'#Ward_Round_Summary-17-01-2018_15-05.html'

The selector thinks it's a class specifier appended to the end. Since . is allowed in an id, we just need to escape the character. You may need to tweak where file comes from or do some string manipulation to escape the character, but this selector works:

'#Ward_Round_Summary-17-01-2018_15-05\\.html'

Example

Upvotes: 2

Ashok
Ashok

Reputation: 447

$('table.report_table_list tr#'+file).remove();

Please update your code like above.

We don't need space when the class or id selector present in the same element.

Also you can simply use like this, if your id is unique. 

 $('#'+file).remove();

Upvotes: 0

Related Questions