how to remove array items from array list

Question

I am using this code to removes array item. I want to remove array items from arraylist on each click. When i clicked on Get Value, it gives 3 values, once got the items, need to remove these items on each click. I am new to jQuery , can anybody please tell me how do i remove items on each click. This is jquery n javascript code.

     <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 code

    <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>

I am not sure of your for loops. The first contain a declaration of the variable newList, which scope is local to this loop so you won't be able to read it from outside for your myDiv. Besides, in both of your loops, you are flattening your values rather than concatenating them. Try to use "newList +=" instead of "newList =". Finally, I missed your "arr" declaration. Maybe you still wanted to use ListOfArray which, as said, must be raised to global scope in order to be accessed from removeArray(). Last note:the minified version of jquery is enough, you can remove the jquery-1.9.1.js include. — user1608171
– user1608171, Commented Sep 22, 2014 at 10:04

Mithun Satheesh · Accepted Answer · 2014-09-22 10:11:56Z

0

issues with your code

1. ListOfArray is not accessible by removeArray function

Your code wont work as ListOfArray is wrapped in $(document).ready(). Its accessible inside the wrapper. But you are trying to access it from the global function removeArray. Make it accessible for the function to remove data. You can do it by taking the removeArray function defintion from the second script block and putting inside the document.ready function.

2. You have multiple versions of jquery in your code

This is not causing the issue you are mentioning but you can keep one.

3. After deletion when you make the list, you are overwriting the `newList`

After an element is deleted and you loop over to make the list again, then each loop you are overwriting the value of newList instead of appending.

4. In the for loop, you refer to array value by `option` instead of `ListOfArray[i]`

Please see the working fiddle below

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>

edited Sep 22, 2014 at 10:11

answered Sep 22, 2014 at 9:42

Mithun Satheesh

27.9k14 gold badges80 silver badges103 bronze badges

Sign up to request clarification or add additional context in comments.

9 Comments

user3766182 Over a year ago

As you said, i removed multiple jquery tags from code, also removed $(document).ready() function, & made it accessible from inside get_value function.but still not working

Mithun Satheesh Over a year ago

try running the above snippet its working. Please update the question with your latest code if not working.

Mithun Satheesh Over a year ago

@user3766182 : if you still keep the $(document).ready, then move removeArray's defintion also inside it so that it can access the array

user3766182 Over a year ago

Thanks @mithunsatheesh. As you wrote i copied your code on my localhost, but it won't work. i am not getting output while executing.

Mithun Satheesh Over a year ago

@user3766182 : will u update question with the latest code you are trying? because i can find it properly running in the fiddle attached above. Also put the complete Javascript code above inside document.ready and try.

|

Collectives™ on Stack Overflow

how to remove array items from array list

1 Answer 1

issues with your code

1. ListOfArray is not accessible by removeArray function

2. You have multiple versions of jquery in your code

3. After deletion when you make the list, you are overwriting the `newList`

4. In the for loop, you refer to array value by `option` instead of `ListOfArray[i]`

9 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

issues with your code

1. ListOfArray is not accessible by removeArray function

2. You have multiple versions of jquery in your code

3. After deletion when you make the list, you are overwriting the newList

4. In the for loop, you refer to array value by option instead of ListOfArray[i]

9 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related

3. After deletion when you make the list, you are overwriting the `newList`

4. In the for loop, you refer to array value by `option` instead of `ListOfArray[i]`