In this article we will see how to remove an array element by index. We all work with client-side arrays, 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 that we need to delete from the array. Here we will explain that. We will provide an option to select the index and will take that value, then we will delete the array. Simple, right? I hope you will like this article.

Please see this article in my blog here.

Using the code

  1. <button id="loadAndShow">Load Array And Show</button><br /><br />
  2. <div id="divloadAndShow"></div><br /><br />
  3. <input type="number" id="number" /><br /><br />
  4. <button id="RemoveAndShow">Remove And Show</button><br /><br />
  5. <div id="divRemoveAndShow"></div><br /><br />
Add CSS
  1. <style>
  2. div {
  3. display: none;
  4. }
  5. </style>
Add the scripts
  1. < script >
  2. var myJSON = [];
  4. function removeArrayElementByIndex(myArray, index) {
  5. myArray.splice(index, 1);
  6. $('#divRemoveAndShow').html('Removed from Array and JSON string is ').append(JSON.stringify(myArray)).show();
  7. myJSON = myArray
  8. }
  9. $(function() {
  10. $('#RemoveAndShow').hide();
  11. $('#number').hide();
  12. $('#loadAndShow').click(function() {
  13. $('#RemoveAndShow').show();
  14. $('#number').show().val(0);
  15. $('#divloadAndShow').html('Loaded to Array and JSON string is ').append('[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]').show();
  16. myJSON = $.parseJSON('[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]');
  17. });
  18. $('#RemoveAndShow').click(function() {
  19. removeArrayElementByIndex(myJSON, $('#number').val());
  20. });
  21. });
  22. < /script>
In the preceding code you can determine a function removeArrayElementByIndex that accepts our array and the index as arguments.
  1. function removeArrayElementByIndex(myArray, index) {
  2. myArray.splice(index, 1);
  3. $('#divRemoveAndShow').html('Removed from Array and JSON string is ').append(JSON.stringify(myArray)).show();
  4. myJSON = myArray
  5. }
When you click on the button loadAndShow, we will load the array and show the contents.
  1. //This is the data we load
  2. [{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]
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
  1. <!DOCTYPE html>
  2. <html>
  3. <head>
  4. <title>Remove an array element by its index</title>
  5. <script src="jquery-2.0.2.min.js"></script>
  6. <style>
  7. div {
  8. display: none;
  9. }
  10. </style>
  11. <script>
  12. var myJSON = [];
  13. function removeArrayElementByIndex(myArray, index) {
  14. myArray.splice(index, 1);
  15. $('#divRemoveAndShow').html('Removed from Array and JSON string is ').append(JSON.stringify(myArray)).show();
  16. myJSON = myArray
  17. }
  18. $(function () {
  19. $('#RemoveAndShow').hide();
  20. $('#number').hide();
  21. $('#loadAndShow').click(function () {
  22. $('#RemoveAndShow').show();
  23. $('#number').show().val(0);
  24. $('#divloadAndShow').html('Loaded to Array and JSON string is ').append('[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]').show();
  25. myJSON = $.parseJSON('[{ "name": "2014", "level": 1 }, { "name": "4", "level": 2 }, { "name": "12", "level": 3 }]');
  26. });
  27. $('#RemoveAndShow').click(function () {
  28. removeArrayElementByIndex(myJSON, $('#number').val());
  29. });
  30. });
  31. </script>
  32. </head>
  33. <body>
  34. <button id="loadAndShow">Load Array And Show</button>
  35. <br />
  36. <br />
  37. <div id="divloadAndShow"></div>
  38. <br />
  39. <br />
  40. <input type="number" id="number" />
  41. <br />
  42. <br />
  43. <button id="RemoveAndShow">Remove And Show</button>
  44. <br />
  45. <br />
  46. <div id="divRemoveAndShow"></div>
  47. <br />
  48. <br />
  49. </body>
  50. </html>
Output

Remove an array element by its index.

run
Remove an array element by its index.

load array
Remove an array element by its index.

output
Remove an array element by its index.

add array and show

Conclusion

I hope this article will be useful. Please share with me your feedback. Thanks in advance.