Javascript 通过检查数组中的值从div中删除项

我希望从隐藏的div中添加/删除具有数组中匹配值的输入项。默认情况下，数组为空，但单击li项时会向其添加一个值。我希望能够删除与当前数组中的值相对应的输入项

当前我的代码可以工作，如果您按照添加项目的相同顺序删除这些项目。我期待有这个功能，您可以删除和添加任何输入在任何顺序。有人能帮我吗

以下是我的js：

var downloadArray = [];
var addToArray = function addToArray(src){  
    downloadArray.push(src);

        //If the input value matches the download Array, remove it
        if (downloadArray == $('.result input').attr("value")) {
            $('input[value="' + downloadArray + '"]').remove();
            console.log(downloadArray);

            //Empties array 
            downloadArray = [];
        } else {
            //Attaches value to array
            var result = '<input type="hidden" class="hiddenValue" name="asset[]" value="' + downloadArray + '" />';
            $('.result').append(result);
            console.log(downloadArray);
            //Empties array 
            downloadArray = [];
        }
};

下面是我的html：

    <form action="compare_arrays_in_dir.php" method="post">
        <ul>
            <li class="add" onclick="addToArray('file1.psd');"><span>Add File 1</span></li>
            <li class="add" onclick="addToArray('file2.psd');"><span>Add File 2</span></li>
            <li class="add" onclick="addToArray('file3.psd');"><span>Add File 3</span></li>
        </ul>
    <div class="result" id="result"></div>
    <input type="submit" name="submit" value="Submit" />
    </form>

---

更新：这里有一个有效的

首先，您的代码和命名非常混乱，所以我对它做了一些修改

添加变为切换，这就是它实际执行的操作 对于添加的隐藏元素，出于测试目的，我使其可见 另外，您应该只对唯一标识符使用ID，所以我将其更改为CLASS。 以下是JS代码：

var resultsArray = [];
function toogleInResults(src) {
    // Try to find src in array
  var idx = resultsArray.indexOf(src);
  //If it is already there, remove it
  if  (idx >= 0) {
    $('input[value="' + src + '"]').remove();
    resultsArray.splice(idx, 1);
  } else {
    // Add the corresponding html for this src
    var result = '<input class="hiddenValue" name="asset[]" value="' + src + '" />';
    $('.result').append(result);
    // Add src to the array
    resultsArray.push(src);
  }
};

以及修改后的HTML：

<form action="compare_arrays_in_dir.php" method="post">
  <ul>
    <li class="add" onclick="toogleInResults('file1.psd');"><span>Add File 1</span></li>
    <li class="add" onclick="toogleInResults('file2.psd');"><span>Add File 2</span></li>
    <li class="add" onclick="toogleInResults('file3.psd');"><span>Add File 3</span></li>
  </ul>
  <div class="result" id="result"></div>

</form>

这是非常基本的，所以我建议您学习更多关于js/html/jQuery的内容，如果这不是为了学习的目的。祝你今天愉快

---

而且是一个工作的JSFIDLE。

你能提供一个工作的JSFIDLE吗？是的，给我们一个小提琴谢谢！我知道它与slice有关，但不确定语法。