javascriptで配列に値を追加/削除する

Question

私のアプリケーションでは、ユーザーが行を追加したり削除したりする機能を作成しました（PHPとJS）。

私の機能の外に私の項目の配列を宣言しました。私が持っている問題は、行を削除すると、番号が配列に追加されなくなったときです。私は、関数の外にある配列に戻ってアイテムを追加するためにプッシュを（）を使用していますが、それは動作していない

var maxField = 10 
var x = 0; 

var idArray = []; 

for (var i = 1; i <= maxField; i++) { 
    idArray.push(i); 
} 

// sort the array as number, not as a string 
idArray = idArray.sort(function(a,b) { 
    return (+a) - (+b); 
}); 



$('#addItem').click(function() { 

    x = idArray.shift(); // get the next available id in the idArray for the record 

    if(x <= maxField) { 
     // do something 
    } 
}); 


$('#removeItem').on('click', '.remove_button', function(e) { 

    var removeButtonId = this.id, 
     splitRemoveButtonId = removeButtonId.split('_'); 
     x = splitRemoveButtonId[2]; 
     // get the value of x and put it back in the idArray, sort the array and be ready for the next record 

     idArray.push(x); 

     idArray = idArray.sort(function(a,b) { 
      return (+a) - (+b); 
     }); 

     alert(x +' - '+ idArray); 

    e.preventDefault(); 

}); 

：

は、ここに私のコードです。私もconcat（）を試みましたが、うまくいきませんでした。行/項目は削除されますが、その行の値xは配列に戻されません。

どのような考えですか？ありがとう。

UPDATE：興味深いことに

すべてが正常に動作する、以下のように私は、配列を埋める場合。

idArray = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10]; 

問題は、アレイを埋めるためにforループに関連していると思われる - または - removeItem関数内のコードが配列を更新していません。解決しよう

for (var i = 1; i <= maxField; i++) { 
    idArray.push(i); 
} 

：

これを解決するために私にしばらく時間がかかったシンプルな問題でした。削除ボタンがクリックされたときにxが配列に戻されると、二重引用符で囲まれた文字列として追加されました。以下を追加することで問題が解決しました。

idArray = idArray.map(Number); 

Answer 1

同様のアイテムのリストを使って作業しているときは、できるだけIDを避けることをおすすめします。ここでは、ユーザーが非常に単純な要素を追加/削除できる一般的な例を示します。ページの操作は相対的位置付けのみで行われます。個々のノードを作成して追加することで追加されるセクションを構築するのではなく、htmlに存在する隠れノードをクローンします。

$('#container').on('click', '.add', function() { 
 
    if ($('.item').length <= 10) { 
 
    var d = $('.item').first().clone(); 
 
    d.find('span').text('different text'); 
 
    d.css('display', ''); 
 
    $('#container').append(d); 
 
    } 
 
}); 
 

 
$('#container').on('click', '.remove', function() { 
 
    $(this).closest('.item').remove(); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id='container'> 
 
    <div class='item' style='display:none'> 
 
    <span>some text</span> 
 
    <button class='remove'>Remove</button>  
 
    </div> 
 
    <button class='add'>Add</button> 
 
</div>