我怎样才能从数组中删除项目

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>