Javascript remove element from array,with deleting first and last element,all and specified elements

In the process of web development, the needs are ever-changing. Take javascript remove element from array, for example, sometimes you may want to delete all elements, sometimes you only need to delete the first element, and sometimes you need to delete the last element, sometimes you only need to delete the specified element. Among these four types of deletion, it is the simplest to delete all the elements of array in javascript, just do it by one line of code; it is also simple to delete the last element with the pop() method; deleting the first element is a little more troublesome.

There are also many functions (methods) in javascript. There are methods available for deleting the first and last elements. Of course, you can also write your own code without using the methods provided by javascript. However, after deleting the first element, all subsequent elements must be moved forward, the code is more troublesome. In addition, to delete specified elements by condition or value, you need to write your own code. Here are 5 examples of Javascript remove element from array.

I. Javascript remove all elements from array

var arr = new Array();
       arr[0] = 1;
       arr[1] = 2;

arr[2] = 3;
       arr.length = 0;//Set the length of array to 0, that is, remove all elements in the array

Or:

arr.splice(0, arr.length);

II. Javascript remove first element from array

var arr = [1, 2, 3, 4, 5, 6, 7, 8, 9];

Method 1:

delete arr[0];

In this method, after deleting the first element, the array index remains unchanged, that is, the length of the array remains unchanged, and the first element becomes undefined, so in the traversal, using this method to delete array elements will not cause errors due to changes in the length of array.

Method 2:

//Javascript remove first element from array
       function DelArrayElement(arr, n) {
              if (arr == null || isNaN(n) || n >= arr.length) {
                     return false;
              }
              arr.splice(n, 1);
       }

Call:

DelArrayElement(arr, 0)
       alert(arr[0] + "; Array length after removing the first element: " + arr.length);

Output result: 2; array length after removing the first element: 8

After deleting the first element of the array, the following elements automatically move forward, so the first element becomes 2, the length of array decreases by 1 to 8, and the index of array also changes.

III. Javascript remove last element from array

var arr = ["a", "b", "c", "d", "e", "f"];

arr.pop();
       alert(arr + "; Array length: " + arr.length);

Output result: a, b, c, d, e; array length: 5

After deleting the last element of array, the length of array is also reduced by 1, from the original 6 to 5.

IV. How to remove specified element from array javascript

1. Delete elements that meet specified conditions

If you want to delete all even numbers in the array, the code is as follows:

Method 1: Save non-even numbers to another array

<script type="text/javascript">
              function RemoveSpecifiedElement() {
                     var arr = [11, 2, 19, 23, 16, 6, 31, 7, 47], newArr = [];
                     var j = 0;
                     for (var i = 0; i < arr.length; i++) {
                            if (arr[i] % 2 != 0) {
                                   newArr[j] = arr[i];
                                   j++;
                            }
                     }
                     return newArr;
              }

       //Call
              var arr = RemoveSpecifiedElement1();
              for (var i = 0; i < arr.length; i++) {
                     document.write(arr[i], ",");
              }
       </script>

Output result: 11,19,23,31,7,47

Method 2 (not efficient): delete an element, i minus 1

<script type="text/javascript">
              function RemoveSpecifiedElement() {
                     var arr = [11, 2, 19, 23, 16, 6, 31, 7, 47];
                     for (var i = 0; i < arr.length; i++) {
                            if (arr[i] % 2 != 0) {
                                   arr.splice(i, 1);
                                   i--;
                            }
                     }
                     return arr;
              }
       </script>

2. Delete the specified consecutive elements

If you want to delete the second to fourth elements in the array, the code can be written like this:

var arr = [11, 12, 13, 14, 15, 16];
       arr.splice(2, 3);

After deletion, the elements of the array are: 11,12,16

V. Javascript array remove element by value

1. No duplicate values in the array

Code show as below:

<script type="text/javascript">
              function RemoveElementByValue(val) {
                     var arr = [10, 32, 8, 45, 38, 17, 31];
                     for (var i = 0; i < arr.length; i++) {
                            if (arr[i] == val) {
                                   arr.splice(i, 1);
                               break;
                            }
                     }
                     return arr;
              }
                
              //Call (Removed 45)
              var arr = RemoveElementByValue(45);
              for (var i = 0; i < arr.length; i++) {
                     document.write(arr[i], ",");
              }
       </script>

After deletion, the array elements are: 10,32,8,38,17,31

2. The array has duplicate values (the values to be deleted include duplicate values)

Code show as below:

<script type="text/javascript">
              function RemoveElementByValues(val) {
                     var arr = [10, 32, 8, 45, 38, 17, 32, 95], newArr = [];
                     var j = 0;
                     for (var i = 0; i < arr.length; i++) {
                            if (arr[i] != val) {
                                   newArr[j] = arr[i];
                                   j++;
                            }
                     }
                     return newArr;
              }

       //Call (remove duplicate value 32)
              var arr = RemoveElementByValues(32);
              for (var i = 0; i < arr.length; i++) {
                     document.write(arr[i], ",");
              }
       </script>

After deletion, the array elements are: 10,8,45,38,17,95