Remove An Array Element By Index – Sibeesh Passion https://www.sibeeshpassion.com My passion towards life Fri, 07 Aug 2015 10:44:01 +0000 en-US hourly 1 https://wordpress.org/?v=6.9.4 /wp-content/uploads/2017/04/Sibeesh_Passion_Logo_Small.png Remove An Array Element By Index – Sibeesh Passion https://www.sibeeshpassion.com 32 32 Remove An Array Element By Index https://www.sibeeshpassion.com/remove-an-array-element-by-index/ https://www.sibeeshpassion.com/remove-an-array-element-by-index/#disqus_thread Fri, 07 Aug 2015 00:30:03 +0000 http://sibeecst_passion.com/?p=8161 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

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

]]> https://www.sibeeshpassion.com/remove-an-array-element-by-index/feed/ 0