Delete the array elements in JavaScript | delete vs splice

For deletion of elements in an array, two approaches can be used. They have their own merits regarding the way they perform the deletion.

Using delete array[index]:

This method deletes the element at the index specified, but does not modify the array. This means that at the place of the deleted index, the element is left undefined or null. This may cause problems when iterating through the array as the deleted index does not hold any value. The length of the array in this case remains the same.

Syntax:

delete array[index]

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>
        Deleting array elements in JavaScript 
        – delete vs splice
    </title>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>Deleting array elements in JavaScript – delete vs splice</b>
    <p>Click on the button below to delete an element.</p>
    <p>Original array is: 1, 2, 3, 4, 5, 6</p>
    <p>New array is: <span class="output"></span></p>
    <button onclick="deleteElement()">Click to delete</button>
    <script>
        function deleteElement() {
            array = [1, 2, 3, 4, 5, 6];
  
            index = 2;
            delete array[index];
  
            console.log(array);
            document.querySelector('.output').textContent = array;
        }
    </script>
</body>
</html>

chevron_right


Output:

  • Display:
    delete-out
  • Console:
    delete-console

Using the splice method:

The array.splice() method is used to add or remove items from an array. This method takes in 3 parameters, the index where the element’s id is to be inserted or removed, the number of items to be deleted and the new items which are to be inserted.

This method actually deletes the element at index and shifts the remaining elements leaving no empty index. This is useful as the array left after deletion can be iterated normally and displayed properly. The length of the array decreases using this method.

Syntax:

array.splice(index, items_to_remove, item1 ... itemX)

Example:

filter_none

edit
close

play_arrow

link
brightness_4
code

<!DOCTYPE html>
<html>
<head>
    <title>
        Deleting array elements in 
        JavaScript – delete vs splice
    </title>
</head>
<body>
    <h1 style="color: green">GeeksforGeeks</h1>
    <b>Deleting array elements in JavaScript – delete vs splice</b>
    <p>Click on the button below to delete an element.</p>
    <p>Original array is: 1, 2, 3, 4, 5, 6</p>
    <p>New array is: <span class="output"></span></p>
    <button onclick="deleteElement()">Click to delete</button>
    <script>
        function deleteElement() {
            array = [1, 2, 3, 4, 5, 6];
  
            index = 2;
            array.splice(index, 1);
  
            console.log(array);
            document.querySelector('.output').textContent = array;
        }
    </script>
</body>
</html>

chevron_right


Output:

  • Before clicking the button:
    splice-out
  • After clicking the button:
    splice-console


My Personal Notes arrow_drop_up

Technical Writer Lets have an update

If you like GeeksforGeeks and would like to contribute, you can also write an article using contribute.geeksforgeeks.org or mail your article to contribute@geeksforgeeks.org. See your article appearing on the GeeksforGeeks main page and help other Geeks.

Please Improve this article if you find anything incorrect by clicking on the "Improve Article" button below.




Article Tags :

Be the First to upvote.


Please write to us at contribute@geeksforgeeks.org to report any issue with the above content.