通过 tr id 从表中删除 tr

Question

我试图使用 jquery 从表中删除 tr

我这样称呼它，其中file是一个包含trid 的变量

$('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>

简讯

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'

将在<table>元素中查找具有类report_table_list的任何元素。 但这不是你的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'

例

Answer 2

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

请像上面一样更新您的代码。

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

如果您的 id 是唯一的，您也可以简单地这样使用。

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