我怎樣才能從數組中刪除項目

Question

1. 需要輸入值轉換成數組類型[[X,Y,Z],[A,B,C]]
2. 我想從陣列只是點擊刪除項目。

$(".btn-primary").click(function() { 
 
    var nbrOfList = 2; // number of item went to remove 
 
    var _data1 = $('#listAllEmp').val(); // default value 
 
    var _data2 = eval("[" + _data1 + "]"); // convert as array 
 

 
    var itemtoRemove = _data2[nbrOfList-1]; // itemtoRemove from array 
 
    _data2.splice($.inArray(itemtoRemove ,_data2),1); // Remove from array 
 

 

 
    jQuery('#listAllEmp').val('[' + _data2 + ']'); // new value after remove 
 
    $('p').text('[' + _data2 + ']') 
 
    
 
});

<input type="hidden" name="" id="listAllEmp" value='["job name 1","nat 1"],["job name 2","nat 2"],["job name 3","nat 3"]' /> 
 

 
<a title="" class="btn btn-primary" href="javascript:void(0);">remove 2 item</a> 
 
<p></p>

Answer 1

使用JSON.stringify

jQuery('#listAllEmp').val(JSON.stringify(_data2)); 
     $('p').text(JSON.stringify(_data2)) 

和JSON.parse代替的eval（使用eval是不是一個好的做法）

JSON.parse('[["job name 1","nat 1"],["job name 2","nat 2"],["job name 3","nat 3"]]') 

Answer 2

簡單併爲數組轉換輸入值提供了適當的正則表達式解決方案。然後刪除或插入項目後，一個簡單的地圖實現將值返回到字符串插入到您的DOM元素。

因此，一旦擁有此數組，您可以通過事件偵聽器刪除或添加項目，並將其插回到元素的value屬性中。好吧，讓我們假設我們是在索引1.刪除項請參見下面的代碼

var _data1 = '["job name 1","nat 1"],["job name 2","nat 2"],["job name 3","nat 3"]', 
 
     reg = /([^"]+)","([^"]+)/g, 
 
    _data2 = []; 
 

 
while(_data2[_data2.length]=reg.exec(_data1)); 
 
_data2 = _data2.slice(0,-1).map(c => c.slice(1,3)); // now we have our array in _data2 
 

 
document.write("<pre>" + JSON.stringify(_data2) + "</pre>\n"); 
 

 
_data2.splice(1,1); // item at index 1 is removed from _data2 
 
_data1 = _data2.map(e => "[" + e + "]").join(","); // _data1 is ready to be sent to value 
 

 
document.write("<pre>" + JSON.stringify(_data1) + "</pre>\n");

Answer 3

嘗試如下修改代碼了一下，希望能滿足您的需要。

$(".btn-primary").click(function() { 
 
    var nbrOfList = 2; 
 
    var data1 = $('#listAllEmp').val(); // default value 
 
    var _data2 = data1.split("],["); // convert as array 
 
    
 
    $('#test').html("<b>Before Remove</b>:--<pre>"+_data2+"</pre>"); //Before remove 
 
     
 
    //_data2.pop(2); //Removing last element 
 
    _data2.splice((_data2.length)-2,nbrOfList) 
 
    
 
    $('#test').append("<b>After each click</b>:--<pre>"+_data2+"</pre>"); //After Remove 
 
     
 
    var numbersString = _data2.join('],['); // Again making string to follow your format 
 
     
 
    //Assigning new value to textbox 
 
    if(numbersString == "") 
 
    $('#listAllEmp').val(""); 
 
    else 
 
    $('#listAllEmp').val(numbersString+"]"); 
 
    
 
    $('#test').append("<b>New String</b>:-- "+$('#listAllEmp').val()); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="hidden" name="" id="listAllEmp" value='["job name 1","nat 1"],["job name 2","nat 2"],["job name 3","nat 3"]' /> 
 

 
<a title="" class="btn btn-primary" href="javascript:void(0);">remove 2 item</a> 
 
<p></p> 
 
<div id="test" style="width:100%;height:50%;"></div>