Easy Ways To Remove Elements From A JavaScript Array E.g.

In this tutorial, we would love to share with you how to remove the elements/items from the javascript array. We will describe four methods of javaScript to removing the elements in an array.

In JavaScript have various methods, to extract/remove elements from JavaScript arrays. Here 4 easy ways to remove the elements from the given arrays.

If you want to remove elements from the end of an array, from the beginning, from the middle, or from the particular index. So you can use the below methods for remove elements from JavaScript arrays:

  • JavaScript pop() – Removes element from the End of an Array
  • JavaScript shift() – Removes element from the beginning of an Array
  • JavaScript splice() – Removes element from a specific Array index
  • JavaScript filter() – Allows you to programmatically remove elements from an Array

JavaScript pop() – Removes element from the End of an Array

The javaScript pop method removes the last element of the array, returns that element. javaScript pop() array method changes the length of the array.

 var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.pop();

 console.log( arr );

Result of the above example

["one", "two", "three", "four", "five", "six", "seven", "eight", "nine"]
 

JavaScript shift() – Removes element from the beginning of an Array

The JavaScript shift () method removes the first element of the array.

The shift method works the same as the pop method, except that it removes the first element of the JavaScript array instead of the last.

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.shift();

 console.log( arr );
 

The shift method removed only the first array element. When the element is removed the remaining elements are shifted down.

Result of the above example

 ["two", "three", "four", "five", "six", "seven", "eight", "nine", "ten"]
 

JavaScript splice() – Removes element from a specific Array index

The javascript splice() method is used to add or remove elements/items from an array.

About the slice() method:

  • The first argument specifies the location at which to begin adding or removing elements.
  • The second argument specifies the number of elements to remove.
  • The third and subsequent arguments are optional; they specify elements to be added to the array.

Let’s take an example of a splice method:

  var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 arr.splice(1,2);

 console.log( arr );
  

Result of the above example

  ["one", "four", "five", "six", "seven", "eight", "nine", "ten"]
 

JavaScript filter() – Allows you to programmatically remove elements from an Array

Filter () has a single parameter, a callback method. The callback is triggered because the filter method iterates through the array elements. It will pass three values ​​in the callback: the current value or element, the current array index and the full array.

The callback method must be either true or false. It is your responsibility to test the criteria (element) to see if it meets your criteria. If it does, you can do the truth. The elements that are returned are added to the new, filtered array.

Example:

 var arr = [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 var filtered = arr.filter(function(value, index, arr){
  return value > three;
 });

 console.log(  arr  ); 
 console.log(  filtered  );  

Result of the above example

  array ===> [ "one", "two", "three", "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

 Filtered ===>  [ "four", "five", "six", "seven", "eight", "nine", "ten" ]; 

How do I remove an object from an array with JavaScript?

Using the javascript splice() method to remove Objects from Array in JavaScript. Let’s see the example below.

We have an array object, we want to remove the id=3 object inside the array. So use the below method:

var arr = [
 {id:1,name:'hello'}, 
 {id:2,name:'world'},
 {id:3,name:'cool'},
 {id:4,name:'javascript'},
 {id:5,name:'jquery'}
 ];
 var ind = arr.findIndex(function(element){
    return element.id===3;
 })
 if(ind!==-1){
 arr.splice(ind, 1)
 }
 console.log (arr);

Conclusion

In this tutorial, you have learned various methods to extract/remove elements from JavaScript arrays.

Be First to Comment

Leave a Reply

Your email address will not be published. Required fields are marked *