remove array items from array list in jquery using javascript

Question

I want to remove array item on each click. Onclick of get_values button, displays array items in front of delete button/link. I need to remove those item on each click of delete button. It deletes whole item, but i want one by one. Plz help me. I am new to 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>

Move var ListOfArray = []; to global scope. in simple language write the statement outside functions and only once. — Satpal
– Satpal, Commented Sep 24, 2014 at 12:43
posted 2 days ago ? how-to-remove-array-items-from-array-list — Mithun Satheesh
– Mithun Satheesh, Commented Sep 24, 2014 at 12:51

Mithun Satheesh · Accepted Answer · 2014-09-24 12:49:07Z

Currently ListofArray is local variable to the onclick handler function and removeArray function cant access it from the outer scope. In addition you have declared a new variable inside removeArray . What you need to do is to keep the ListofArray variable as a single instance which is shared by both the functions.

Like

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>

Collectives™ on Stack Overflow

remove array items from array list in jquery using javascript

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related