JavaScript Remove Item From Array
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Pragati
In this article we will show you the solution of JavaScript remove item from array, we are going to use JavaScript to delete items from an array.
We will be using three different methods in order to do so.
- shift() method: the shift() property of JavaScript is used to remove the first element from an array.
- pop() method: the pop() property of javascript is used to remove last element from an array.
- splice() method: by using splice() we can remove items by index position. we can use the splice function by denoting ( index , howmanyItem)
Step By Step Guide On JavaScript Remove Item From Array :-
Method 1 - Shift() Method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> javascript remove item from array </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> WELCOME TO TALKERSCODE </h1>
<h3> javascript remove item from array </h3>
</center>
<script>
let fruits = ["apple", "orange", "kiwi", "banana", "berry"] ;
console.log(fruits.shift()) ;
console.log(fruits) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> to mention the version of the HTML file
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Attach an external CSS file using <link> tag
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <Script> tag to write JavaScript within it.
- Now create an array named fruits with some values
- Using the array.shift() function with console.log() to display the removed element
- And again using console.log() to display the array after removing the first element.
Method 2 - pop() method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> javascript remove item from array </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> WELCOME TO TALKERSCODE </h1>
<h3> javascript remove item from array </h3>
</center>
<script>
const array = [10, 20, 30, 40, 50, 60, 70, 80] ;
const x = array.pop() ;
console.log(x, array) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> to mention the version of the HTML file
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Attach an external CSS file using <link> tag
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <Script> tag to write JavaScript within it.
- First create an array using const
- Another variable x is created with array using pop() method to remove the last element
- Console.log() to display the array and also displaying the removed element
Method 3 - Splice() Method
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title> javascript remove item from array </title>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/water.css@2/out/water.css">
<style>
h1 {
color : rgb(95, 194, 95) ;
font-size: 25px;
font-weight : bolder ;
}
</style>
</head>
<body>
<center>
<h1> WELCOME TO TALKERSCODE </h1>
<h3> javascript remove item from array </h3>
</center>
<script>
var num = [10, 20, 30, 40, 50, 60, 70, 80] ;
var a = num.splice(2, 1) ;
console.log(a, num) ;
</script>
</body>
</html>
- First, we write <! DOCTYPE html> to mention the version of the HTML file
- Secondly, the <html> tag is used to indicate the beginning of an HTML document.
- Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
- Attach an external CSS file using <link> tag
- <h1> tag used to add heading here and also adding the inline CSS here.
- Create a <Script> tag to write JavaScript within it.
- First create an array num with some values.
- Using splice() and denote the index position and how many item we want to delete.
- Using console.log() to display the removed elements and the array after removing the element.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to remove item from array using JavaScript.
I hope this article on JavaScript remove item from array helps you and the steps and method mentioned above are easy to follow and implement.
About Pragati
