Question

继续我刚刚提出的一个问题并得到了令人满意的答复：

当我上传文件时，我以编程方式生成表单中的隐藏字段，如下所示：

<!-- first file uploaded -->
<input type="hidden" class="file" id="file-1" name="file-1" value="quote_202Hillside.pdf">
<input type="hidden" class="filesize" id="filesize-1" name="filesize-1" value="104246">
<input type="hidden" class="filethumbnailurl" id="filethumbnailurl-1" name="filethumbnailurl-1" value="/images/website/icon-pdf.png">

<!-- second file uploaded -->
<input type="hidden" class="file" id="file-2" name="file-2" value="quote_39Queen.pdf">
<input type="hidden" class="filesize" id="filesize-2" name="filesize-2" value="114045">
<input type="hidden" class="filethumbnailurl" id="filethumbnailurl-2" name="filethumbnailurl-2" value="/images/website/icon-pdf.png">

请注意我是如何将“-1”附加到上传的第一个文件的“id”属性，将“-2”附加到第二个文件的“id”属性。这应该对下一步有用，我需要帮助：

每个上传的文件都会显示在屏幕上，并显示“删除”按钮。每个相应的删除按钮都具有data-url属性，例如，如下。

<button data-url="quote_39Queen.pdf">
    <i class="glyphicon glyphicon-trash"></i>
    <span>Delete</span>
</button>

如何删除与该文件关联的所有隐藏字段？

我想伪代码会是这样的：点击删除按钮，找到隐藏字段的集合，其中class =“file”和“value”属性匹配单击按钮的data-url值。然后，删除其“id”属性中具有相同“-1”或“-2”等附录的所有隐藏字段。

我希望这是有道理的。

Answer 1

将文件编号附加到按钮属性data-fileNo

<button data-url="quote_39Queen.pdf" data-fileNo='1' onClick="removeHidden(this);">
    <i class="glyphicon glyphicon-trash"></i>
    <span>Delete</span>
</button>

JS

function removeHidden(thisButton){
   var fileNo=$(thisButton).attr('data-fileNo') ; //2,3
   $('#file-'+fileNo).remove();
   $('#filesize-'+fileNo).remove();
   $('#filethumbnailurl-'+fileNo).remove();

}

Answer 2

我做了一些事情，虽然有人可能会有更优雅的方式，但我需要小心在dom中为我不想删除的元素中使用类似的id属性。

var file = button.data('url');
var $x = $("input[value='" + file + "']");
var xno = $x.attr("id").split("-")[1];
$( "input[id*='-" + xno + "']" ).remove();

根据使用jquery删除的文件删除隐藏的字段

2 个答案: