JavaScript splice(): Add and/or Remove Array Elements

The JavaScript splice() method does the following three jobs:

adds new elements to the array.
removes a specified number of elements from the array.
adds new elements and removes a specified number of elements from a specified array at once.

For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p id="xyz"></p>
   
   <script>
      const myarr = ["Boston", "Austin", "Seattle", "Oakland", "Denver", "Berlin"];
      myarr.splice(1, 3, "Paris", "Helsinki");
      document.getElementById("xyz").innerHTML = myarr;
   </script>
   
</body>
</html>

Output

In the above JavaScript example, the following statement:

myarr.splice(1, 3, "Paris", "Helsinki");

states that from index number 1, 3 elements will be removed, and then the following two elements will be added:

Paris
Helsinki

from index number 1. Since indexing starts with 0, Boston is at index number 0, whereas Austin was at index number 1.

JavaScript splice() syntax

The syntax of the splice() method in JavaScript is:

array.splice(index, x, item1, item2, item3, ..., itemN)

The index refers to the index number from which we need to start the operation of either adding array elements, removing array elements, or doing both.

The x refers to the quantity by number to remove that specified number of elements. For example, specify 4 to delete 4 elements starting at index.

item1, item2, item3, and itemN refer to elements that will be added to the specified array.

The splice() method returns an array that contains the removed elements. For example:

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>

   <p>Return (if no elements is removed): <span id="one"></span></p>
   <p>Return (if two elements is removed): <span id="two"></span></p>

   <script>
      const myArrayOne = ["Seattle", "Oakland"];
      const myArrayTwo = ["Boston", "Austin", "Denver", "Berlin"];
      
      document.getElementById("one").innerHTML = myArrayOne.splice(1, 0);
      document.getElementById("two").innerHTML = myArrayTwo.splice(1, 2);
   </script>
   
</body>
</html>

Output

Return (if no elements is removed):

Return (if two elements is removed):

Remove a specified number of array elements from the given index

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p>Original Array: <b><span id="x"></span></b></p>
   <p>Modified Array: <b><span id="y"></span></b></p>
   
   <script>
      const myArray = ["Boston", "Austin", "Seattle", "Oakland", "Denver", "Berlin"];
      document.getElementById("x").innerHTML = myArray;

      myArray.splice(3, 2);
      document.getElementById("y").innerHTML = myArray;
   </script>
   
</body>
</html>

Output

Original Array:

Modified Array:

In the above example, from index number 3, two elements have been deleted. Since indexing starts with 0, the fourth-position element is the element that will be at index number 3.

Add array elements from the given index

HTML with JavaScript Code

<!DOCTYPE html>
<html>
<body>
   
   <p>Original Array: <b><span id="a"></span></b></p>
   <p>Modified Array: <b><span id="b"></span></b></p>

   <script>
      const m = ["Boston", "Austin", "Seattle", "Oakland", "Denver", "Berlin"];
      document.getElementById("a").innerHTML = m;

      m.splice(3, 0, "New Delhi", "Tokyo");
      document.getElementById("b").innerHTML = m;
   </script>
   
</body>
</html>

Output

Original Array:

Modified Array:

Since this time I do not need to remove an element but rather add two new ones, I specified 0 as the number of elements to remove.

JavaScript Online Test

« Previous Tutorial Next Tutorial »

Liked this post? Share it!