Question

我想在每次点击时删除数组项。单击get_values按钮，在删除按钮/链接前显示数组项。我需要在每次点击删除按钮时删除这些项目。它删除整个项目，但我想逐个删除。 Plz帮助我。我是jquery的新手。

<html>
<body>
<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>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!--<script src="../js/jquery.min.js"></script>-->
<script type="text/javascript">
    $("#get_value").click(function () 
    {   //causing error here removed the array in name value
        var ListOfArray = [];
        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++)
        {  
            alert(i); //alert(ListOfArray.length);
            var newList = "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + option + " <br>";
            alert(newList); //alert(i);
        };
        document.getElementById('myDiv').innerHTML += newList;
        return true;
    });
    function removeArray(i)  
    {   
        var ListOfArray = [];
        alert('after removed array.'+i);
        ListOfArray.splice(i,1);
        var newList = "";
        //console.log(ListOfArray); 
        for (var i = 0; i < ListOfArray.length; i++)
        {   //You refer to option here for element, which should be replaced by proper index of array
          alert(ListOfArray.length);  alert(i); 
          newList += "<a href='#' onClick='removeArray(" + i + ");'return false;> DELETE </a> " + ListOfArray[i] + " <br>";
           alert(i); 
        };
        document.getElementById('myDiv').innerHTML = newList;
        return true;
    }   
</script>
</body>
</html>

Answer 1

目前，ListofArray是onclick处理函数的局部变量，removeArray函数无法从外部作用域访问它。此外，您已在removeArray中声明了一个新变量。您需要做的是将ListofArray变量保持为由两个函数共享的单个实例。

像

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

使用javascript从jquery中的数组列表中删除数组项

1 个答案: