从HTML表中动态生成的输入文件控件中删除选定文件的一个文件,可以通过以下步骤实现:
以下是一个示例代码:
<!DOCTYPE html>
<html>
<head>
<title>删除文件示例</title>
</head>
<body>
<table id="fileTable">
<tr>
<td>
<input type="file" class="fileInput" id="fileInput1">
<button onclick="deleteFile('fileInput1')">删除</button>
</td>
</tr>
<tr>
<td>
<input type="file" class="fileInput" id="fileInput2">
<button onclick="deleteFile('fileInput2')">删除</button>
</td>
</tr>
</table>
<script>
function deleteFile(inputId) {
var fileInput = document.getElementById(inputId);
fileInput.parentNode.parentNode.remove(); // 从DOM中移除文件输入控件所在的行
}
</script>
</body>
</html>
在上述示例中,我们给每个文件输入控件添加了一个唯一的ID,并为每个删除按钮添加了一个点击事件监听器。当点击删除按钮时,会调用deleteFile
函数,并传入要删除的文件输入控件的ID。在deleteFile
函数中,通过ID找到要删除的文件输入控件,并使用parentNode.parentNode
来获取到该控件所在的行,并将该行从DOM中移除。
请注意,上述示例仅为演示如何删除文件输入控件,实际应用中可能需要根据具体需求进行适当的修改和扩展。
领取专属 10元无门槛券
手把手带您无忧上云