Remove An Array Element By Index
In this article, we will see how we can remove an array element by index. We all work with client side array right? What will you do if you need to remove an array element?It will be easy for you to do, if you know the index of the element which we need to delete from the array. Here we are going to discuss that. We will give an option to select the index, and will take that value, and then we will delete the array. Simple right?I hope you will like this article.
Using the code
Create some elements
[html]
<button id="loadAndShow">Load Array And Show</button><br /><br />
<div id="divloadAndShow"></div><br /><br />
<input type="number" id="number" /><br /><br />
<button id="RemoveAndShow">Remove And Show</button><br /><br />
<div id="divRemoveAndShow"></div><br /><br />
[/html]
Add CSS
[css]
<style>
div {
display: none;
}
</style>
[/css]
Add the scripts
[js]
<script>
var myJSON = [];
function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
$(‘#divRemoveAndShow’).html(‘Removed from Array and JSON string is ‘).append(JSON.stringify(myArray)).show();
myJSON = myArray
}
$(function () {
$(‘#RemoveAndShow’).hide();
$(‘#number’).hide();
$(‘#loadAndShow’).click(function () {
$(‘#RemoveAndShow’).show();
$(‘#number’).show().val(0);
$(‘#divloadAndShow’).html(‘Loaded to Array and JSON string is ‘).append(‘[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]’).show();
myJSON = $.parseJSON(‘[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]’);
});
$(‘#RemoveAndShow’).click(function () {
removeArrayElementByIndex(myJSON, $(‘#number’).val());
});
});
</script>
[/js]
In the above code you can find out a function removeArrayElementByIndex which accepts our array and the index as arguments.
[js]
function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
$(‘#divRemoveAndShow’).html(‘Removed from Array and JSON string is ‘).append(JSON.stringify(myArray)).show();
myJSON = myArray
}
[/js]
When you click on the button loadAndShow , we will load the array and shows the contents.
[js]
//This is the data we load
[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]
[/js]
And if you click on the button RemoveAndShow we will delete the array by passing the array and index to the function removeArrayElementByIndex
Complete code
[html]
<!DOCTYPE html>
<html>
<head>
<title>Remove an array element by its index</title>
<script src="jquery-2.0.2.min.js"></script>
<style>
div {
display: none;
}
</style>
<script>
var myJSON = [];
function removeArrayElementByIndex(myArray, index) {
myArray.splice(index, 1);
$(‘#divRemoveAndShow’).html(‘Removed from Array and JSON string is ‘).append(JSON.stringify(myArray)).show();
myJSON = myArray
}
$(function () {
$(‘#RemoveAndShow’).hide();
$(‘#number’).hide();
$(‘#loadAndShow’).click(function () {
$(‘#RemoveAndShow’).show();
$(‘#number’).show().val(0);
$(‘#divloadAndShow’).html(‘Loaded to Array and JSON string is ‘).append(‘[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]’).show();
myJSON = $.parseJSON(‘[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]’);
});
$(‘#RemoveAndShow’).click(function () {
removeArrayElementByIndex(myJSON, $(‘#number’).val());
});
});
</script>
</head>
<body>
<button id="loadAndShow">Load Array And Show</button><br /><br />
<div id="divloadAndShow"></div><br /><br />
<input type="number" id="number" /><br /><br />
<button id="RemoveAndShow">Remove And Show</button><br /><br />
<div id="divRemoveAndShow"></div><br /><br />
</body>
</html>
[/html]
Output
Remove an array element by its index
Remove an array element by its index
Remove an array element by its index
Remove an array element by its index
Conclusion
I hope someone found it is useful. Please share me your feedback. Thanks in advance.
Kindest Regards
Sibeesh Venu
