Question

我试图用jquery

从表中删除tr

我称之为file是一个包含tr

ID的变量

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

为什么它不起作用？

表格样本

<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 () {

        }
    });
}

Answer 1

空格字符在选择器中具有特定含义。例如，这个选择器：

'table .report_table_list'

将在一个report_table_list元素中查找任何元素，其中包含<table> 类。但那不是你的HTML所拥有的。在您的HTML中，<table>元素本身具有该类。这将是：

'table.report_table_list'

ID选择器也是如此。一旦两者都得到纠正，你就明白了：

'table.report_table_list tr#'+file

但是，由于id是（或应该至少）唯一，因此您可以简化整个过程：

'#'+file

修改：进行其他调试后，看起来选择器也会被.值中的file字符混淆：

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

选择器认为它是附加到末尾的类说明符。由于.中允许id ，我们只需要转义该字符。您可能需要调整file来自哪里或执行一些字符串操作来转义字符，但此选择器有效：

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

Example

Answer 2

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

请更新您的代码，如上所示。

当类或id选择器出现在同一元素中时，我们不需要空格。

如果你的id是唯一的，你也可以这样使用。

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

通过tr id从表中删除tr

2 个答案: