配列の値をチェックしてdivから項目を削除します

Question

配列から値が一致する隠しdivの入力項目を追加/削除しようとしています。配列はデフォルトでは空ですが、項目がクリックされると値が追加されます。現在配列にある値に対応する入力項目を削除したいと考えています。

現在、私のコードは、あなたがそれらを追加したのと同じ順序で項目を削除すると機能します。私は任意の順序で任意の入力を削除して追加できるこの機能を持っています。誰かが私を助けることができますか？以下は

は私の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> 

UPDATE：ここで最初のJSFiddle

Answer 1

作業あなたのコードと命名ので、非常に紛らわしいです私はそれを少し変えました。

• の追加が追加の隠し要素についてはトグル（それはそれが実際に何をするかである）
• になり、私はそれが目に見える。また、あなたが唯一の一意の識別子のためのIDを使用する必要があります
• テスト目的のために作られたので、私はそれを変更しました授業へ。ここで

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の詳細を研究するために、あなたを提案既に学習目的ではありません）。良い一日を！！

hereは、動作中のJSFiddleです。