如何从数组列表中删除数组项

Question

我正在使用此代码删除数组项。我想在每次点击时从arraylist中删除数组项。当我点击Get Value时，它会提供3个值，一旦获得项目，需要在每次点击时删除这些项目。我是jQuery的新手，任何人都可以告诉我如何删除每次点击的项目。 这是jquery n javascript代码。

     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script type="text/javascript">

var i =0; var ListOfArray = [];
$("#get_value").click(function () 
{   //causing error here removed the array in name value
    var option = $('input:text[name=name1]').map(function() {
        return $(this).val();
    }).get().join();
    $("input:text[name=name1]").val("");
    ListOfArray.push(option);
    for (var i= 0; i < ListOfArray.length; i++){
        var newList = "<a href='#' onClick='removeArray(" + i + ");return true;'> DELETE </a> " + option + " <br>";alert(newList);
    };
    document.getElementById('myDiv').innerHTML += newList;
    return false;
});
function removeArray(i)  
{

    alert('after removed array.'+i);
    ListOfArray.splice(i,1);
    var newList = "";
    console.log(ListOfArray);
    for (i = 0; i < ListOfArray.length; i++){
       //You refer to option here for element, which should be replaced by proper index of array
       newList += "<a href='javascript:void(0)' onClick='removeArray(" + i + "); return false;'> DELETE </a> " + ListOfArray[i] + " <br>";
    };
    document.getElementById('myDiv').innerHTML = newList;
    return true;
}   

</script>

HTML代码

    <div id="array_container"> 
<label>Name</label>
<input type="text" name="name1" value="" /> 
<label>State</label>
<input type="text" name="name1" value="" /> 
<label>Color</label>
<input type="text" name="name1" value="" /> 
<input type="button" name="get_value" id="get_value" value="Get Value"/> 
</div>
<div id="myDiv"></div>

Answer 1

您的代码问题

1。 removeArray函数

无法访问ListOfArray

您的代码无效，因为ListOfArray包含在$(document).ready()中。它可以在包装内部访问。但是您正尝试从全局函数removeArray访问它。使其可以访问该功能以删除数据。您可以通过从第二个脚本块中取removeArray函数定义并放入document.ready函数来实现。

2。您的代码中有多个版本的jquery

这不会导致你提到的问题，但你可以保留一个。

3。在制作列表后删除后，您将覆盖newList

删除一个元素并循环再次生成列表后，每个循环都会覆盖newList的值而不是追加。

4。在for循环中，您引用option而不是ListOfArray[i]

的数组值

请参阅下面的工作小提琴

var i =0; var ListOfArray = [];
$("#get_value").click(function () { 
//causing error here removed the array in name value
var option = $('input:text[name=name1]').map(function() {
	return $(this).val();
}).get().join();
$("input:text[name=name1]").val("");
ListOfArray.push(option);
for (var i= 0; i < ListOfArray.length; i++){
	var newList = "<a href='#' onClick='removeArray(" + i + ");return true;'> DELETE </a> " + option + " <br>";
};
document.getElementById('myDiv').innerHTML += newList;
return false;
});

function removeArray(i) {   
alert('after removed array.'+i);
ListOfArray.splice(i,1);
var newList = "";
console.log(ListOfArray);
for (i = 0; i < ListOfArray.length; i++){
   //You refer to option here for element, which should be replaced by proper index of array
   newList += "<a href='javascript:void(0)' onClick='removeArray(" + i + "); return false;'> DELETE </a> " + ListOfArray[i] + " <br>";
};
document.getElementById('myDiv').innerHTML = newList;
return true;
}   

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="array_container"> 
<label>Name</label>
<input type="text" name="name1" value="" /> 
<label>State</label>
<input type="text" name="name1" value="" /> 
<label>Color</label>
<input type="text" name="name1" value="" /> 
<input type="button" name="get_value" id="get_value" value="Get Value"/> 
</div>
<div id="myDiv"></div>