JAVASCRIPT - REMOVE FROM ARRAY

How to remove an element from the Array by its name/value?

Let us say, we have a Array that contains three names, Mohan, Kriti and Salim. And we want to remove Kriti from the Array.

It can be done with the remove() Function

Example :

<html>
<body>  
<script>

	var x = ["Mohan", "Kriti", "Salim"]
	var index = x.indexOf("Kriti")
	x.splice(index, 1)
	document.write(x) 
    
</script>      
</body>
</html>

Output :

Mohan,Salim

So, in the above code we have created a Array and initialised to the variable x.

x = ["Mohan", "Kriti", "Salim"]

Below is how the values are positioned in the Array,

Next, we have used the indexOf() function that searches for the name Kriti and gives its index/position.

var index = x.indexOf("Kriti")

Then we have used that index with splice() method.

x.splice(index, 1)

And what splice() method does is, removes 1 element from the index mentioned.

In simple words, it removes the element Kriti from the index 1.

And we get the below output,

Mohan,Salim

How to remove an element from the Array by its index/position?

Let us say, we have a Array that contains three names, Mohan, Kriti and Salim. And we want to remove the element at index/position 2 from the Array.

So, we can use delete keyword or the pop() function to remove an element from the Array.

Let us see the example with delete keyword first.

Example :

<html>
<body>  
<script>

	var x = ["Mohan", "Kriti", "Salim"]
	delete x[2]
	document.write(x) 
    
</script>      
</body>
</html>

Output :

Mohan,Kriti,

So, in the above code we have created a Array and initialised to the variable x.

var x = ["Mohan", "Kriti", "Salim"]

Below is how the values are positioned in the Array,

Next, we have used the del keyword that searches for the element at index/position 2 and removes it from the Array.

delete x[2]

And as we can see, there is Salim at index/position 2. So Salim is removed from the Array.

And we get the below output,

Mohan,Kriti,

Just remember that delete x[2] doesn't actually deletes the location. In other words the length of the array is still 3. Just that the name Salim at location 2 is removed from the array.

How to remove the last element from the Array?

The pop() Function can be used to remove the last element from the Array.

Example :

<html>
<body>  
<script>

	var x = ["Mohan", "Kriti", "Salim"]
	x.pop()
	document.write(x)
    
</script>      
</body>
</html>

Output :

Mohan,Kriti

So, in the above code we have created a Array and initialised to the variable x.

var x = ["Mohan", "Kriti", "Salim"]

Below is how the values are positioned in the Array,

Next, we have used the pop() function that searches for the last value and removes it from the Array.

x.pop()

And as we can see, there is Salim at the end of the Array. So Salim is removed from the Array.

And we get the below output,

Mohan,Kriti

How to remove the first element of the Array?

The shift() Function can be used to remove the first element of the Array.

Example :

<html>
<body>  
<script>

	var x = ["Mohan", "Kriti", "Salim"]
	x.shift()
	document.write(x)
    
</script>      
</body>
</html>

Output :

Kriti,Salim

So, in the above code we have created a Array and initialised to the variable x.

var x = ["Mohan", "Kriti", "Salim"]

Below is how the values are positioned in the Array,

Next, we have used the shift() function that searches for the first value by default and removes it from the Array.

x.shift()

And as we can see, there is Salim at the end of the Array. So Salim is removed from the Array.

And we get the below output,

Kriti,Salim

How to remove all the elements from the Array?

The splice() Function can be used to remove all the elements from the Array.

Example :

<html>
<body>  
<script>

	var x = ["Mohan", "Kriti", "Salim"]
	x.splice(0, x.length)
	document.write(x) 
    
</script>      
</body>
</html>

Output :

So, in the above code we have created a Array and initialised to the variable x.

x = ["Mohan", "Kriti", "Salim"]

Below is how the values are positioned in the Array,

Next, we have used the splice() function to remove all the elements from the Array.

x.splice(0, x.length)

So, the spice() function has two parameters. The first paramenter 0 says, start from the first location and the second parameter x.length specifies the length of the array i.e. 3.

So, the spice() function starts from the first location (i.e. 0) and deletes all the 3 elements from the array.

Another way to remove all the elements from the array is to set the length of the array to 0.

Let us see in the next example,

Example :

<html>
<body>  
<script>

	var x = ["Mohan", "Kriti", "Salim"]
	x.length = 0
	document.write(x) 
    
</script>      
</body>
</html>

Output :

How to remove a chunk of elements from the Array?

Say, we have an array with four names, "Mohan", "Kriti", "Salim" and "Peter".

And we want to remove "Kriti" and "Salim" from the Array.

The splice() Function can be used to achieve the same.

Example :

<html>
<body>  
<script>

	var x = ["Mohan", "Kriti", "Salim", "Peter"]
	x.splice(1, 2)
	document.write(x) 
    
</script>      
</body>
</html>

Output :

Mohan,Peter

So, all we have done is used the splice() function with two arguments.

x.splice(1, 2)

The first argument 1 says, start from the second location.

And the second argument 2 says, delete 2 elements from the second location.

And we get the below output.

Mohan,Peter

❮❮ PREV NEXT ❯❯