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

The JavaScript splice() method does following three jobs:

adds new elements to the array
removes specified number of elements from array
adds new elements and removes specified number of elements from 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 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 following two elements will be added:

Paris
Helsinki

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

JavaScript splice() Syntax

The syntax of splice() method in JavaScript is:

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

The index refers to index number from where we need to start the operation of either adding array elements, or removing array elements or to do 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 from index.

item1, item2, item3, itemN refers 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 Specified Number of Array Elements from 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 above example, from index number 3, 2 elements has been deleted. Since indexing starts with 0, therefore fourth position elements is the element that will be at index number 3.

Add Array Elements from 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, rather need to add two new elements, therefore I specified 0 as number of element to remove.

JavaScript Online Test

« Previous Tutorial Next Tutorial »