当没有标识每一行的ID时，如何删除包含文件名的每一行(一次删除一行)

Question

我在网上找到了这部分代码，我只是想完成它并将其用于我的项目。

在下面的脚本中，我试图添加一个ID来标识一行，但它只引用第一行。一旦删除了该行(第一行(，就无法删除以下行。

我在网上做了一些广泛的研究，但找不到任何对我有帮助的东西。你有什么建议吗？

下面是表的代码，然后是删除包含用户要删除的文件名的行的脚本。下面是我实际删除行的脚本。我添加了id='link'来标识该行。

var markup = "<tr id ='link'><td>" + result + "</td><td><a  href='#' onclick='DeleteFile("" + result + "")' ><span class='fa fa-trash fa-fw'></span></a></td></tr>"; // Binding the file name
$("#ListofFiles tbody").append(markup);
$('#Files').val('');
$('#FileBrowse').find("*").prop("disabled", false);
}

<div class="container">
<h4>
Attachments:
</h4>
<div id="FileBrowse">
<!--Start of HTML input control button-->
<div class="row">
<div class="col-sm-4">
<input type="file" id="Files" />
</div>
<div class="col-sm-2">
<input type="button" id="UploadBtn" class="btn btn-danger" value="Upload" />
</div>
</div>
</div>
<!--End of HTML input control button-->
<div class="row">
<div class="col-sm-4">
<div id="progressbar-5">
<div class="progress-label">
</div>
</div>
</div>
</div>
<br />
<div class="row">
<!-- Start of HTML table to show the files list-->
<div class="col-sm-6">
<table class="table" id="ListofFiles">
<tr>
<th>
Files
</th>
<th>
Action
</th>
</tr>
</table>
</div>
</div>
<!-- End of HTML table showing the files list-->
<br />
<br />
<br />
<br />
</div>

Answer 1

您可以创建一个函数来执行此操作。我们对每个单元格进行迭代，确定它是否包含文件名，如果包含，我们通过使用其索引在DOM中找到单元格，移动到其父元素(tr(并删除它来删除行。

function deleteFile(filename) {
$("#ListofFiles tr td").each((index, cell) => {
cell.textContent.includes(filename) && 
$("#ListofFiles tr td").eq(index).parent().remove();
});
}
deleteFile("file.ext");

let result = "file.ext";
var markup = "<tr id ='link'><td>" + result + "</td><td><a  href='#' onclick='DeleteFile("" + result + "")' ><span class='fa fa-trash fa-fw'></span></a></td></tr>"; // Binding the file name
$("#ListofFiles tbody").append(markup);
$('#Files').val('');
$('#FileBrowse').find("*").prop("disabled", false);
function deleteFile(filename) {
$("#ListofFiles tr td").each((index, cell) => {
cell.textContent.includes(filename) && $("#ListofFiles tr td").eq(index).parent().remove();
});
}
deleteFile("file.ext");

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<h4>
Attachments:
</h4>
<div id="FileBrowse">
<!--Start of HTML input control button-->
<div class="row">
<div class="col-sm-4">
<input type="file" id="Files" />
</div>
<div class="col-sm-2">
<input type="button" id="UploadBtn" class="btn btn-danger" value="Upload" />
</div>
</div>
</div>
<!--End of HTML input control button-->
<div class="row">
<div class="col-sm-4">
<div id="progressbar-5">
<div class="progress-label">
</div>
</div>
</div>
</div>
<br />
<div class="row">
<!-- Start of HTML table to show the files list-->
<div class="col-sm-6">
<table class="table" id="ListofFiles">
<tr>
<th>
Files
</th>
<th>
Action
</th>
</tr>
</table>
</div>
</div>
<!-- End of HTML table showing the files list-->
<br />
<br />
<br />
<br />
</div>