Click here to Skip to main content
15,867,756 members
Articles / All Topics

Remove An Array Element By Index

Rate me:
Please Sign up or sign in to vote.
4.83/5 (4 votes)
7 Aug 2015CPOL1 min read 8.9K   4   2
How to 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 />

Add CSS:

CSS
<style>
       div {
           display: none;
       }
   </style>

Add the scripts:

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

In the above code, you can find out a function removeArrayElementByIndex which accepts our array and the index as arguments.

JavaScript
function removeArrayElementByIndex(myArray, index) {
           myArray.splice(index, 1);
           $('#divRemoveAndShow').html
           ('Removed from Array and JSON string is  ').append(JSON.stringify(myArray)).show();
           myJSON = myArray
       }

When you click on the button loadAndShow, we will load the array and shows the contents.

JavaScript
//This is the data we load
[{ "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

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>

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 your feedback. Thanks!

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


Written By
Software Developer
Germany Germany
I am Sibeesh Venu, an engineer by profession and writer by passion. I’m neither an expert nor a guru. I have been awarded Microsoft MVP 3 times, C# Corner MVP 5 times, DZone MVB. I always love to learn new technologies, and I strongly believe that the one who stops learning is old.

My Blog: Sibeesh Passion
My Website: Sibeesh Venu

Comments and Discussions

 
QuestionWhy the tag is all-topic? Pin
super9-Aug-15 22:20
professionalsuper9-Aug-15 22:20 
AnswerRe: Why the tag is all-topic? Pin
Sibeesh Passion9-Aug-15 22:42
professionalSibeesh Passion9-Aug-15 22:42 
I will do that. Thanks for noticing it
==================!!!====================!!!========================
So much complexity in software comes from trying to make one thing do two things.
Kindest Regards
Sibeesh
http://sibeeshpassion.com/

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.