{"id":127661,"date":"2022-08-29T16:28:51","date_gmt":"2022-08-29T16:28:51","guid":{"rendered":"https:\/\/phppot.com\/?p=19191"},"modified":"2022-08-29T16:28:51","modified_gmt":"2022-08-29T16:28:51","slug":"javascript-remove-element-from-array","status":"publish","type":"post","link":"https:\/\/sickgaming.net\/blog\/2022\/08\/29\/javascript-remove-element-from-array\/","title":{"rendered":"JavaScript Remove Element from Array"},"content":{"rendered":"<div class=\"modified-on\" readability=\"7.1111111111111\"> by <a href=\"https:\/\/phppot.com\/about\/\">Vincy<\/a>. Last modified on August 29th, 2022.<\/div>\n<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>\n<ul>\n<li>PHP \u2013 array_splice($inputArray, $offset)<\/li>\n<li>Python \u2013 inputArray.remove($element) to remove item by element. inputArray.pop($offset) to remove item by index.<\/li>\n<\/ul>\n<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>\n<ol>\n<li>Remove an element from JavaScript <a href=\"https:\/\/phppot.com\/php\/power-of-php-arrays\/\">array by index or value<\/a>.<\/li>\n<li>Remove all matching elements by value from JavaScript array.<\/li>\n<li>Remove elements from JavaScript array using filter (an alternate).<\/li>\n<li>Remove first element from array javascript.<\/li>\n<li>Remove last element from array javascript.<\/li>\n<\/ol>\n<h2>1) Remove an element from JavaScript array (by index and value)<\/h2>\n<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>\n<div class=\"post-section-highlight\" readability=\"47\">\n<h3>Quick example<\/h3>\n<pre class=\"prettyprint\"><code class=\"language-javascript\">\/\/ this JavaScript example removes first occurrence of the matching element from array\nconst elements = [2, 5, 4, 5, 6, 5, 8];\nconsole.log(elements);\n\/\/ returns the index of the first match of value '5' from an array\nconst index = elements.indexOf(5);\n\/\/ when the element is found the index will be non-negative\nif (index &gt; -1) { \/\/ the second parameter '1' asks to remove one element elements.splice(index, 1);\n}\n\/\/ result array after delete is [ 2, 4, 5, 6, 5, 8 ]\nconsole.log(elements);\n<\/code><\/pre>\n<\/div>\n<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>\n<p><img decoding=\"async\" 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=\"auto, (max-width: 550px) 100vw, 550px\"><\/p>\n<h2>2) Remove all matching elements by value from JavaScript array<\/h2>\n<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>\n<p>On each iteration, it compares and calls&nbsp;<em>array.splice()<\/em> by the current index. In PHP, it is about one line to remove all the occurrences by using&nbsp;<em>array_diff()<\/em> function.<\/p>\n<p class=\"code-heading\">remove-all-item.html<\/p>\n<pre class=\"prettyprint\"><code class=\"language-php-template\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;JavaScript Remove All Matching Element from Array&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt; &lt;h1&gt;JavaScript Remove All Matching Element from Array&lt;\/h1&gt; &lt;script&gt; function removeAllItem(elementsArray, element) { var i = 0; \/\/ iterate the elements array and remove matching element \/\/ till the end of the array index while (i &lt; 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); &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>Output<\/h3>\n<pre><code>Original Array: (7)&nbsp;[2, 5, 4, 5, 6, 5, 8]\nOutput Array: (4)&nbsp;[2, 4, 6, 8]\n<\/code><\/pre>\n<h2>3) Remove elements from JavaScript array using filter (an alternate)<\/h2>\n<p>This is an alternate method that returns the same array output as the result of removing an item.<\/p>\n<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>\n<p>If the match is not found, the current element will be pushed to an output array.<\/p>\n<p class=\"code-heading\">remove-alternate.html<\/p>\n<pre class=\"prettyprint\"><code class=\"language-php-template\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;JavaScript Remove Element from Array - Alternate Method using filter&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt; &lt;h1&gt;JavaScript Remove Element from Array - Alternate Method using filter&lt;\/h1&gt; &lt;script&gt; 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 ] &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>Output<\/h3>\n<pre><code>Original Array: (7)&nbsp;[2, 5, 4, 5, 6, 5, 8]\nOutput Array: (4)&nbsp;[2, 4, 6, 8]\n<\/code><\/pre>\n<h2>4) Remove first element from array javascript<\/h2>\n<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>\n<p class=\"code-heading\">remove-first-element.html<\/p>\n<pre class=\"prettyprint\"><code class=\"language-php-template\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;JavaScript Remove First Element from Array&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt; &lt;h1&gt;JavaScript Remove First Element from Array&lt;\/h1&gt; &lt;script&gt; \/\/ 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); &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>Output<\/h3>\n<pre><code>Original Array: (7)&nbsp;[2, 5, 4, 5, 6, 5, 8]\nOutput Array: (6)&nbsp;[5, 4, 5, 6, 5, 8]\n<\/code><\/pre>\n<h2>5) Remove the last element from array using JavaScript<\/h2>\n<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>\n<p>Note: If the input array is empty then the <em>shift()<\/em> and <em>pop()<\/em> will return <em>undefined<\/em>.<\/p>\n<p class=\"code-heading\">remove-last-element.html<\/p>\n<pre class=\"prettyprint\"><code class=\"language-php-template\">&lt;html&gt;\n&lt;head&gt;\n&lt;title&gt;JavaScript Remove Last Element from Array&lt;\/title&gt;\n&lt;\/head&gt;\n&lt;body&gt; &lt;h1&gt;JavaScript Remove Last Element from Array&lt;\/h1&gt; &lt;script&gt; \/\/ 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); &lt;\/script&gt;\n&lt;\/body&gt;\n&lt;\/html&gt;\n<\/code><\/pre>\n<h3>Output<\/h3>\n<pre><code>Original Array: (7)&nbsp;[2, 5, 4, 5, 6, 5, 8]\nOutput Array: (6)&nbsp;[2, 5, 4, 5, 6, 5]\n<\/code><\/pre>\n<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>\n<p><a class=\"download\" href=\"https:\/\/phppot.com\/downloads\/javascript\/javascript-remove-element-array.zip\">Download<\/a><\/p>\n<p> <!-- #comments --> <\/p>\n<div class=\"related-articles\">\n<h2>Popular Articles<\/h2>\n<\/p><\/div>\n<p> <a href=\"https:\/\/phppot.com\/javascript\/javascript-remove-element-array\/#top\" class=\"top\">\u2191 Back to Top<\/a> <\/p>\n","protected":false},"excerpt":{"rendered":"<p>by Vincy. Last modified on August 29th, 2022. 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. PHP \u2013 array_splice($inputArray, $offset) Python \u2013 inputArray.remove($element) to remove item by element. inputArray.pop($offset) to remove item by index. This article gives code [&hellip;]<\/p>\n","protected":false},"author":2,"featured_media":127662,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[65],"tags":[],"class_list":["post-127661","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php-updates"],"_links":{"self":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/127661","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/comments?post=127661"}],"version-history":[{"count":0,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/posts\/127661\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media\/127662"}],"wp:attachment":[{"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/media?parent=127661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/categories?post=127661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/sickgaming.net\/blog\/wp-json\/wp\/v2\/tags?post=127661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}