{"id":2758,"date":"2016-10-25T07:51:52","date_gmt":"2016-10-25T07:51:52","guid":{"rendered":"http:\/\/www.jquery-az.com\/?p=2758"},"modified":"2023-09-25T09:17:54","modified_gmt":"2023-09-25T09:17:54","slug":"how-to-remove-a-specific-javascript-array-element-splice-delete-functions","status":"publish","type":"post","link":"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/","title":{"rendered":"How to remove a specific JavaScript array element? Splice, delete functions"},"content":{"rendered":"

The methods for removing array elements<\/strong><\/h3>\n

The JavaScript provides a few methods for removing array elements. These include pop and shift methods.<\/p>\n

The pop method removes the first element from the given array.<\/p>\n

The shift method removes the last element from the given array.<\/p>\n

You may set the length of an\u00a0array as 0 if require removing all the elements from the given array.<\/p>\n

However, what if you need to remove a specific element from an array?<\/strong><\/p>\n

For example:<\/p>\n

Array_name.splice (index);<\/pre>\n
Or<\/p>\n
Array_name.delete[index]<\/pre>\n
You may use the array splice method<\/strong> for removing a specific element from the given array. The array splice returns a new array of removed elements. While the specified array in the splice method contains the remaining elements after removing the specified elements.<\/p>\n
See the demos below for learning to use the splice JavaScript method and other ways for removing particular elements.<\/p>\n
A demo of removing the specific element using splice method<\/strong><\/h3>\n
In this demo, an array of numbers is created. Five elements are added in the array initially. After that, the array splice method is used for removing the third element by zero-based index number.<\/p>\n
The numeric array elements are displayed before and after using the JavaScript splice method as follows:<\/p>\n
\"javascript<\/p>\n
See online demo and code<\/strong><\/h6>\n
The JS code with splice:<\/strong><\/p>\n
<script type=\"text\/javascript\">\r\n\r\nvar Arr_Numbers = [10,20,30,40,50];\r\n\r\nvar i;\r\n\r\nvar the_arr_before_after = \"The original array: <BR>\";\r\n\r\n\u00a0\r\n\r\nfor (i=0; i < Arr_Numbers.length; i++){\r\n\r\n\u00a0\u00a0\u00a0 the_arr_before_after += Arr_Numbers[i] + \"<BR>\";\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0 \u00a0\u00a0document.getElementById(\"p1\").innerHTML = the_arr_before_after;\u00a0\u00a0\u00a0\r\n\r\n\u00a0\r\n\r\nArrretrun = Arr_Numbers.splice(2,1);\r\n\r\n\u00a0\r\n\r\nvar the_arr_before_after = \"Array elements after splice method: <BR>\";\r\n\r\nfor (i=0; i < Arr_Numbers.length; i++){\r\n\r\n\u00a0\u00a0\u00a0 the_arr_before_after += Arr_Numbers[i] + \"<BR>\";\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 document.getElementById(\"p2\").innerHTML = the_arr_before_after;\u00a0\u00a0\u00a0\r\n\r\n<\/script><\/pre>\n
 <\/p>\n
You noticed\u00a0I used two parameters in the splice method. The first specifies the index of the\u00a0element to be removed. The second parameter tells how many elements to remove after the specified index.<\/p>\n
See the demo below if you leave the second parameter.<\/p>\n
What if the\u00a0second parameter is not provided in array splice JS method?<\/strong><\/h3>\n
Using the same code as in above example except the second parameter is not given in the splice method i.e.:<\/p>\n
Arr_Numbers.splice(2);<\/p><\/blockquote>\n
See the code and output:<\/p>\n
\"javascript<\/p>\n
See online demo and code<\/strong><\/h6>\n
You can see, it removed all elements ahead of the given index number as well.<\/p>\n
In addition, I also displayed the removed array elements, as such, the splice method returns an array of removed elements.<\/p>\n
The JS code:<\/strong><\/p>\n
<script type=\"text\/javascript\">\r\n\r\nvar Arr_Numbers = [10,20,30,40,50];\r\n\r\nvar i;\r\n\r\nvar the_arr_before_after = \"The original array: <BR>\";\r\n\r\n\u00a0\r\n\r\nfor (i=0; i < Arr_Numbers.length; i++){\r\n\r\n\u00a0\u00a0\u00a0 the_arr_before_after += Arr_Numbers[i] + \"<BR>\";\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 document.getElementById(\"p1\").innerHTML = the_arr_before_after;\u00a0\u00a0\u00a0\r\n\r\n\u00a0\r\n\r\nArrretrun = Arr_Numbers.splice(2);\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\nvar the_arr_before_after = \"Array elements after splice method: <BR>\";\r\n\r\nfor (i=0; i < Arr_Numbers.length; i++){\r\n\r\n\u00a0\u00a0\u00a0 the_arr_before_after += Arr_Numbers[i] + \"<BR>\";\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 document.getElementById(\"p2\").innerHTML = the_arr_before_after;\r\n\r\n\u00a0\r\n\r\n\/\/The removed array elements in returned array\u00a0\u00a0\r\n\r\nvar the_arr_before_after = \"The removed array elements: <BR>\";\r\n\r\nfor (i=0; i < Arrretrun.length; i++){\r\n\r\n\u00a0\u00a0\u00a0 the_arr_before_after += Arrretrun[i] + \"<BR>\";\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 document.getElementById(\"p3\").innerHTML = the_arr_before_after;\r\n\r\n\u00a0\r\n\r\n<\/script><\/pre>\n
 <\/p>\n
Using the delete function for removing array element<\/strong><\/h3>\n
You may also use the delete function for removing a specific element in an array. However, the delete function keeps an empty spot and if you iterate through that array after using the delete function, it will display that specific element as undefined<\/strong>.<\/p>\n
Have a look at this demo using the delete function:<\/p>\n
\"javascript<\/a><\/p>\n
See online demo and code<\/strong><\/h6>\n
The JavaScript code for using the delete function:<\/p>\n
<script type=\"text\/javascript\">\r\n\r\nvar Arr_Strings = ['The','JavaScript','Array','Totorial'];\r\n\r\nvar i;\r\n\r\nvar the_arr_before_after = \"The original string array elements: <BR><BR>\";\r\n\r\n\u00a0\r\n\r\nfor (i=0; i < Arr_Strings.length; i++){\r\n\r\n\u00a0\u00a0\u00a0 the_arr_before_after += Arr_Strings[i] + \"<BR>\";\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 document.getElementById(\"p1\").innerHTML = the_arr_before_after;\u00a0\u00a0\u00a0\r\n\r\n\u00a0\r\n\r\n\/\/Using the delete function\r\n\r\ndelete Arr_Strings[2];\r\n\r\n\u00a0\r\n\r\n\u00a0\r\n\r\nvar the_arr_before_after = \"Array elements after splice method: <BR><BR>\";\r\n\r\nfor (i=0; i < Arr_Strings.length; i++){\r\n\r\n\u00a0\u00a0\u00a0 the_arr_before_after += Arr_Strings[i] + \"<BR>\";\r\n\r\n\u00a0\u00a0\u00a0 }\r\n\r\n\u00a0\u00a0\u00a0 document.getElementById(\"p2\").innerHTML = the_arr_before_after;\r\n\r\n\u00a0\r\n\r\n<\/script><\/pre>\n
 <\/p>\n
You can see, the undefined is displayed for the third element after it is removed by using the delete function.<\/p>\n
Note: <\/strong>You have to provide index number in square brackets as using the delete.<\/p>\n
It is recommended to use splice method for arrays. The delete may complicate the situation as undefined spots are created.<\/p>\n","protected":false},"excerpt":{"rendered":"
The methods for removing array elements The JavaScript provides a few methods for removing array elements. These include pop and shift methods. The pop method removes the first element from the given array. The shift method removes the last element from the given array. You may set the length of an\u00a0array as 0 if require … Read more<\/a><\/p>\n","protected":false},"author":1,"featured_media":2759,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[20],"tags":[],"yoast_head":"\nHow to remove a specific JavaScript array element? Splice, delete functions<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to remove a specific JavaScript array element? Splice, delete functions\" \/>\n<meta property=\"og:description\" content=\"The methods for removing array elements The JavaScript provides a few methods for removing array elements. These include pop and shift methods. The pop method removes the first element from the given array. The shift method removes the last element from the given array. You may set the length of an\u00a0array as 0 if require ... Read more\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-10-25T07:51:52+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-09-25T09:17:54+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/10\/3.1-JavaScript-splice.png\" \/>\n\t<meta property=\"og:image:width\" content=\"342\" \/>\n\t<meta property=\"og:image:height\" content=\"264\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"jqueryaz\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"jqueryaz\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/\",\"url\":\"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/\",\"name\":\"How to remove a specific JavaScript array element? Splice, delete functions\",\"isPartOf\":{\"@id\":\"https:\/\/www.jquery-az.com\/#website\"},\"datePublished\":\"2016-10-25T07:51:52+00:00\",\"dateModified\":\"2023-09-25T09:17:54+00:00\",\"author\":{\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\"},\"breadcrumb\":{\"@id\":\"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.jquery-az.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to remove a specific JavaScript array element? Splice, delete functions\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.jquery-az.com\/#website\",\"url\":\"https:\/\/www.jquery-az.com\/\",\"name\":\"\",\"description\":\"PHP, Bootstrap, jQuery, CSS, Python, Java and others\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.jquery-az.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3\",\"name\":\"jqueryaz\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g\",\"caption\":\"jqueryaz\"}}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to remove a specific JavaScript array element? Splice, delete functions","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/","og_locale":"en_US","og_type":"article","og_title":"How to remove a specific JavaScript array element? Splice, delete functions","og_description":"The methods for removing array elements The JavaScript provides a few methods for removing array elements. These include pop and shift methods. The pop method removes the first element from the given array. The shift method removes the last element from the given array. You may set the length of an\u00a0array as 0 if require ... Read more","og_url":"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/","article_published_time":"2016-10-25T07:51:52+00:00","article_modified_time":"2023-09-25T09:17:54+00:00","og_image":[{"width":342,"height":264,"url":"https:\/\/www.jquery-az.com\/wp-content\/uploads\/2016\/10\/3.1-JavaScript-splice.png","type":"image\/png"}],"author":"jqueryaz","twitter_misc":{"Written by":"jqueryaz","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/","url":"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/","name":"How to remove a specific JavaScript array element? Splice, delete functions","isPartOf":{"@id":"https:\/\/www.jquery-az.com\/#website"},"datePublished":"2016-10-25T07:51:52+00:00","dateModified":"2023-09-25T09:17:54+00:00","author":{"@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3"},"breadcrumb":{"@id":"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.jquery-az.com\/how-to-remove-a-specific-javascript-array-element-splice-delete-functions\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.jquery-az.com\/"},{"@type":"ListItem","position":2,"name":"How to remove a specific JavaScript array element? Splice, delete functions"}]},{"@type":"WebSite","@id":"https:\/\/www.jquery-az.com\/#website","url":"https:\/\/www.jquery-az.com\/","name":"","description":"PHP, Bootstrap, jQuery, CSS, Python, Java and others","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.jquery-az.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/c3f75f86b1c65bf0b93fc46f629fcad3","name":"jqueryaz","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.jquery-az.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e2a3743b4da71bd52984e02bd5c3280c?s=96&d=mm&r=g","caption":"jqueryaz"}}]}},"_links":{"self":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2758"}],"collection":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/comments?post=2758"}],"version-history":[{"count":3,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2758\/revisions"}],"predecessor-version":[{"id":9859,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/posts\/2758\/revisions\/9859"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media\/2759"}],"wp:attachment":[{"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/media?parent=2758"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/categories?post=2758"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.jquery-az.com\/wp-json\/wp\/v2\/tags?post=2758"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}