+- Sick Gaming (https://www.sickgaming.net)
+-- Forum: Programming (https://www.sickgaming.net/forum-76.html)
+--- Forum: PHP Development (https://www.sickgaming.net/forum-82.html)
+--- Thread: [Tut] JavaScript Remove Element from Array (/thread-99877.html)
[Tut] JavaScript Remove Element from Array - xSicKxBot - 08-30-2022
JavaScript Remove Element from Array
<div style="margin: 5px 5% 10px 5%;"><img src="https://www.sickgaming.net/blog/wp-content/uploads/2022/08/javascript-remove-element-from-array.jpg" width="550" height="306" title="" alt="" /></div><div><div class="modified-on" readability="7.1111111111111"> by <a href="https://phppot.com/about/">Vincy</a>. Last modified on August 29th, 2022.</div>
<p>In this tutorial, let us learn about some JavaScript basics. How to remove elements from an array? The following list has examples in some languages.</p>
<ul>
<li>PHP – array_splice($inputArray, $offset)</li>
<li>Python – inputArray.remove($element) to remove item by element. inputArray.pop($offset) to remove item by index.</li>
</ul>
<p>This article gives code to learn how to do this in JavaScript. It has many examples of removing an element from a JavaScript array.</p>
<ol>
<li>Remove an element from JavaScript <a href="https://phppot.com/php/power-of-php-arrays/">array by index or value</a>.</li>
<li>Remove all matching elements by value from JavaScript array.</li>
<li>Remove elements from JavaScript array using filter (an alternate).</li>
<li>Remove first element from array javascript.</li>
<li>Remove last element from array javascript.</li>
</ol>
<h2>1) Remove an element from JavaScript array (by index and value)</h2>
<p>This quick example gets the first index of the given element. Then, it applies JavaScript <em>splice()</em> by sending the first index position. The <em>splice()</em> removes the item in the specified index.</p>
<div class="post-section-highlight" readability="47">
<h3>Quick example</h3>
<pre class="prettyprint"><code class="language-javascript">// this JavaScript example removes first occurrence of the matching element from array
const elements = [2, 5, 4, 5, 6, 5, 8];
console.log(elements);
// returns the index of the first match of value '5' from an array
const index = elements.indexOf(5);
// when the element is found the index will be non-negative
if (index > -1) { // the second parameter '1' asks to remove one element elements.splice(index, 1);
}
// result array after delete is [ 2, 4, 5, 6, 5, 8 ]
console.log(elements);
</code></pre>
</div>
<p>This screenshot shows the output of the above example. It shows first the original array and then the modified array after the removal of an item.</p>
<p><img loading="lazy" class="alignnone size-large wp-image-19203" src="https://phppot.com/wp-content/uploads/2022/08/javascript-remove-element-array-550x306.jpg" alt="javascript remove element array" width="550" height="306" srcset="https://phppot.com/wp-content/uploads/2022/08/javascript-remove-element-array-550x306.jpg 550w, https://phppot.com/wp-content/uploads/2022/08/javascript-remove-element-array-300x167.jpg 300w, https://phppot.com/wp-content/uploads/2022/08/javascript-remove-element-array-768x427.jpg 768w, https://phppot.com/wp-content/uploads/2022/08/javascript-remove-element-array.jpg 1000w" sizes="(max-width: 550px) 100vw, 550px"></p>
<h2>2) Remove all matching elements by value from JavaScript array</h2>
<p>This example creates a custom JavaScript <a href="https://phppot.com/php/functions-in-php/">function</a> to remove all the occurrences of a given element. It iterates all the array elements in a <a href="https://phppot.com/php/loop-control-structure/">loop</a>.</p>
<p>On each iteration, it compares and calls <em>array.splice()</em> by the current index. In PHP, it is about one line to remove all the occurrences by using <em>array_diff()</em> function.</p>
<p class="code-heading">remove-all-item.html</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<head>
<title>JavaScript Remove All Matching Element from Array</title>
</head>
<body> <h1>JavaScript Remove All Matching Element from Array</h1> <script> function removeAllItem(elementsArray, element) { var i = 0; // iterate the elements array and remove matching element // till the end of the array index while (i < elementsArray.length) { if (elementsArray[i] === element) { elementsArray.splice(i, 1); } else { ++i; } } return elementsArray; } // this JavaScript example removes all occurence of the matching element from array const elements = [ 2, 5, 4, 5, 6, 5, 8 ]; console.log(elements); elementAfterRemoval = removeAllItem(elements, 5); console.log(elementAfterRemoval); </script>
</body>
</html>
</code></pre>
<h3>Output</h3>
<pre><code>Original Array: (7) [2, 5, 4, 5, 6, 5, 8]
Output Array: (4) [2, 4, 6, 8]
</code></pre>
<h2>3) Remove elements from JavaScript array using filter (an alternate)</h2>
<p>This is an alternate method that returns the same array output as the result of removing an item.</p>
<p>Instead of a loop, it parses the input array by using a JavaScript filter. The filter callback checks the condition to find the <a href="https://phppot.com/javascript/remove-duplicates-from-array-javascript/">element match to remove</a>.</p>
<p>If the match is not found, the current element will be pushed to an output array.</p>
<p class="code-heading">remove-alternate.html</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<head>
<title>JavaScript Remove Element from Array - Alternate Method using filter</title>
</head>
<body> <h1>JavaScript Remove Element from Array - Alternate Method using filter</h1> <script> const elements = [ 2, 5, 4, 5, 6, 5, 8 ]; console.log(elements); var value = 5 // filter function does not change the original array // but the splice function changes the original array newElements = elements.filter(function(item) { return item !== value }) console.log(newElements) // result is [ 2, 4, 6, 8 ] </script>
</body>
</html>
</code></pre>
<h3>Output</h3>
<pre><code>Original Array: (7) [2, 5, 4, 5, 6, 5, 8]
Output Array: (4) [2, 4, 6, 8]
</code></pre>
<h2>4) Remove first element from array javascript</h2>
<p>In JavaScript, the <em>array.shift()</em> function removes the first element of an input array. The <em>shift()</em> function returns the remove element which is 2 in this example.</p>
<p class="code-heading">remove-first-element.html</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<head>
<title>JavaScript Remove First Element from Array</title>
</head>
<body> <h1>JavaScript Remove First Element from Array</h1> <script> // the JavaScript shift function moves elements to the left // this is like pop from a stack // splice function can also be used to achieve this var elements = [ 2, 5, 4, 5, 6, 5, 8 ]; console.log(elements); // removedElement is 2 var removedElement = elements.shift(); // result array after delete is [ 5, 4, 5, 6, 5, 8 ] console.log(elements); </script>
</body>
</html>
</code></pre>
<h3>Output</h3>
<pre><code>Original Array: (7) [2, 5, 4, 5, 6, 5, 8]
Output Array: (6) [5, 4, 5, 6, 5, 8]
</code></pre>
<h2>5) Remove the last element from array using JavaScript</h2>
<p>JavaScript has a function <em>array.pop()</em> to remove the last item of an array. It also returns the removed item to the calling point as like like <em>array.shift()</em>.</p>
<p>Note: If the input array is empty then the <em>shift()</em> and <em>pop()</em> will return <em>undefined</em>.</p>
<p class="code-heading">remove-last-element.html</p>
<pre class="prettyprint"><code class="language-php-template"><html>
<head>
<title>JavaScript Remove Last Element from Array</title>
</head>
<body> <h1>JavaScript Remove Last Element from Array</h1> <script> // the JavaScript pop function removes last element from an array var elements = [ 2, 5, 4, 5, 6, 5, 8 ]; console.log(elements); // removedElement is 8 var removedElement = elements.pop(); // result array after delete is [ 2, 5, 4, 5, 6, 5 ]; console.log(elements); </script>
</body>
</html>
</code></pre>
<h3>Output</h3>
<pre><code>Original Array: (7) [2, 5, 4, 5, 6, 5, 8]
Output Array: (6) [2, 5, 4, 5, 6, 5]
</code></pre>
<p class="p1">This example created custom functions in JavaScript to remove all the occurrences of the specified element. Instead, there should be a native function in JavaScript for doing this. PHP, Python and most of the languages have the native function for this.</p>
<p><a class="download" href="https://phppot.com/downloads/javascript/javascript-remove-element-array.zip">Download</a></p>
<p> <!-- #comments --> </p>
<div class="related-articles">
<h2>Popular Articles</h2>
</p></div>
<p> <a href="https://phppot.com/javascript/javascript-remove-element-array/#top" class="top">↑ Back to Top</a> </p>
</div>
https://www.sickgaming.net/blog/2022/08/29/javascript-remove-element-from-array/