Remove array items from array list using jquery

JavaScript
1

Onclick of button ‘Get_value’ ,displays 3 user inputs in array in front of delete button/link. I want to delete all 3 item on each onclick of delete button. M new to jquery, Plz help me

<html>
<head>

</head>
<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>
2

Hi there,

The main thing that was wrong in this script was not having a shared array between the two functions, you were creating a new one in each.

<!doctype html>
<html>
<head>
</head>
<body>
<div id="array_container">
  <label>Name</label>
  <input type="text" name="name" value="">
  <label>State</label>
  <input type="text" name="state" value="">
  <label>Color</label>
  <input type="text" name="color" 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 type="text/javascript">
var items = [];

$("#get_value").click(function() {
  var values = $('input[type=text]').map(function() {
    return $(this).val();
  }).get().join();

  $("input[type=text]").val("");
  addItem(values);
});

function buildList() {
  var html = "";
  for (var i=0; i<items.length; i++) {
    html += '<a href="#" onclick="removeItem(' + i + '); return false;">DELETE</a> ' + items[i] + '<br>';
  };
  $('#myDiv').html(html);
}

function addItem(values) {
  items.push(values);
  buildList();
}

function removeItem(index) {
  items.splice(index, 1);
  buildList();
}
</script>
</body>
</html>