Question

我有一个文件上传部分。添加文件会触发上传并传回文件名。该文件名将添加到数组中的隐藏输入元素。它也会被截断并以<li>显示给用户。

这会添加<li>：

function addFile(filename, imgName, id) {
    $("#fileGroup ul").append('<li id="file' + id + '" class="list-group-item attachment"><div class="pull-right"><a href="#" onclick="return trash_click(' + id + ')"><i class="btn-icon fa fa-trash"></i></a></div><span>' + filename + '</span></li>');
}

这会添加隐藏元素：

$('<input>').attr({
    type: 'hidden',
    name: 'RequestFileName[' + i + ']',
    id: 'RequestFileName[' + i + ']',
    value: imgName
}).appendTo('form');

并导致添加：

<input type="hidden" name="RequestFileName[1]" id="RequestFileName[1]" value="03b35411-aa77-441c-bde5-2965f0f4db45\Capture1.JPG">

点击<li>中的图标会转到下面的功能。这样做会删除<li>，但不会影响添加的输入元素：

function trash_click(id) 
{
    $('#file' + id).remove();
    $('#RequestFileName[' + id + ']').remove();
    return false;
}

起初我认为它可能是不允许删除的数组部分，但我只使用一个简单的'#mytest'作为id进行测试，但表单元素不会删除。

想法？

Answer 1

我找到了答案。显然因为输入元素被附加到表单，我不得不专门调出表单来删除它。

var request = 'RequestFileName[' + id + ']';
var myRequestFile = $("#requestForm input[name='" + request + "']");
myRequestFile.remove();
return false;

Answer 2

问题是方括号[ ]是特殊字符，选择方式，所以你必须逃避它们才能工作。 jQuery的“美丽”只是默默地失败了，但是如果你试图使用document.querySelector运行相同的选择器，你会注意到有错误：

document.querySelector('#RequestFileName[1]').value = '1';

<input type="text" name="RequestFileName[1]" id="RequestFileName[1]" value="03b35411-aa77-441c-bde5-2965f0f4db45\Capture1.JPG">

在这里：https://jsfiddle.net/n34rfz51/

您的“解决方案”之所以有效，是因为您忽略了它们而没有意识到，您正在运行看起来像#requestForm input[name='RequestFileName[1]']的查询。由于括号是引号，因此它们充当文本，您的查询可以正常工作

转义值并保留主代码的其他方法是使用反斜杠（\）来转义这些括号。请注意，你需要其中两个，因为字符串中的反斜杠也是特殊的，所以你必须逃避它

$('#RequestFileName\\[1\\]').val('1');

<script
  src="https://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
<input type="text" name="RequestFileName[1]" id="RequestFileName[1]" value="03b35411-aa77-441c-bde5-2965f0f4db45\Capture1.JPG">

在这里：https://jsfiddle.net/n34rfz51/1/

所以你的行会改为：

$('#RequestFileName\\[' + id + '\\]').remove();

jQuery .remove（）不会删除动态输入项

2 个答案: