Splice() method to add, remove, replace elements from an array in JavaScript

<script type="text/javascript">
var scripts = new Array();
scripts[0] = "PHP";
scripts[1] = "ASP";
document.write(scripts.join(" <br> "));
document.write("<br>--Now after applying splice()--<br>");
var t1=scripts.splice(2,0,"VBScript","Perl");
document.write(scripts.join(" <br> "));
</script>

Output

PHP
ASP
--Now after applying splice()--
PHP
ASP
VBScript
Perl

By using splice() we can add new element, we can remove some element, we can create new array by using (or taking) elements from an array. This is a method by which we can replace elements of an array with a new set of elements. Here is the general syntax of splice method when applied to our scripts array object.

var t1=scripts.splice(starting_number,length,"list1");

scripts is our array object,
starting_number is the array element number (index ) from where the starting element is to be taken up,Note that the first element index is 0

length is the number of elements to be removed starting from the starting_number, If it is 0 then nothing is removed.

list1 is the name of the element to be replaced.

The replaced list can be more than the number of items to be removed. They will be added to the array. All the elements removed from scripts array will be placed in a new array t1.

Now let us try to understand how splice method works in different conditions. We will take our scripts array example, here is our array.

Replacing elements of an array using splice method

var scripts = new Array();
scripts[0] = "PHP";
scripts[1] = "ASP";
scripts[2] = "JavaScript";
scripts[3] = "HTML";
document.write(scripts.join(" <br> "));
document.write("<br>--Now after applying splice()--<br>");
var t1=scripts.splice(2,2,"VBScript","Perl");
document.write(scripts.join(" <br> "));

Output is here

By using the above code you can see the last two elements of the scripts array is replaced with two new elements. The last two elements JavaScript and HTML are replaced by VBScript and Perl. This is how we can replace elements from any position by new elements. new array t1 will be holding the replaced array from the main array scripts.

Adding new elements without removing

Yes this also can be done, just make the number of elements to be removed to 0. The position where the new element to be added can be specified by starting_number. Here is the code to add two new elements after the second element.

var scripts = new Array();
scripts[0] = "PHP";
scripts[1] = "ASP";
scripts[2] = "JavaScript";
 scripts[3] = "HTML";
 document.write(scripts.join(" <br> "));
document.write("<br>--Now after applying splice()--<br>");
var t1=scripts.splice(2,0,"VBScript","Perl");
 document.write(scripts.join(" <br> "));

Output is here

Adding new element at the end of the array

We can do this by replacing starting_number with length of the array. In the above example replace the line with splice function with this one.

var t1=scripts.splice(scripts.length,0,"VBScript","Perl");

Adding new element at the beginning of the array

Same way we can add elements at the staring of the array by making the starting_number to 0


var t1=scripts.splice(0,0,"VBScript","Perl");

Removing element by using splice

Let us remove 2nd element.

var t1=scripts.splice(1,1);

To remove 3rd element here is the code.

var t1=scripts.splice(1,2);

Here we have changed the index number only, the index number of 3rd element is 2

Removing any element

In above code we have used index number of the element to remove it from the array. Most of the time we will be knowing the element name only ( not its index position). Here we will first use indexOf function to get the position of the element and then use splice to remove it.

<script>
var scripts = new Array();
scripts[0] = "PHP";
scripts[1] = "ASP";
scripts[2] = "JavaScript";
scripts[3] = "HTML";
document.write(scripts.join(" <br> "));
document.write("<br>--Now after applying splice()--<br>");
var index_no = scripts.indexOf('ASP'); // position of the element
// remove the element by using its position number
var t1=scripts.splice(index_no,1); 
document.write(scripts.join(" <br> "));
</script>

Output is here

DEMO of deleting element by splice Removing all elements of an array
Array Reference How to display elements of an Array

Subscribe to our YouTube Channel here

Replacing elements at different positions of an array

Replacing elements of an array using splice method

Adding new elements without removing

Adding new element at the end of the array

Adding new element at the beginning of the array

Removing element by using splice

Removing any element

Subscribe