Delete Element From Array JavaScript
Last Updated : Mar 11, 2024
IN - JavaScript | Written & Updated By - Riya
In this article we will show you the solution of delete element from array JavaScript, we are going to use JavaScript to delete any element from an array.
We are going to use ‘for loop’ in order to do deleting any element from the array. Let us see the syntax of the for loop first,
for(initialization ; condition ; increment/decrement)
We are going to two examples below. In the first one, we will delete any element and in the second one, we will delete any element the user wants to delete by taking inputs from the user.
Step By Step Guide On Delete Element From Array JavaScript :-
Example 1
<!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> delete element from array javascript </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> TALKERSCODE </h1>
<h3> delete element from array javascript </h3>
</center>
<script>
let array = [10, 20, 30, 40, 50, 60, 70 ,80] ;
let position = 2 ;
for(let i=2; i<array.length-1; i++) {
array[i] = array[i+1] ;
}
array.length = array.length-1 ;
console.log(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.
- Using Let to create an array with some values.
- Set the value of the position of the array element that we want to delete
- Now create a for loop to by i less than array.length-1 . within it set the array position to the next position
- Now set the array length to be same as before
- Using console.log to display the array after removing the element
Example 2
In this example we will take the input from the user to as the position of the element we want to delete.
<!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> delete element from array javascript </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> TALKERSCODE </h1>
<h3> delete element from array javascript </h3>
</center>
<input type="text" name="position" id="position" placeholder="Enter Position">
<button onclick="remove()"> Remove element </button>
<script>
function remove() {
let data = [10, 20, 30, 40, 50, 60, 70 ,80];
let position = document.getElementById("position").value;
position = parseInt(position);
for (let i = position; i < data.length - 1; i++) {
data[i] = data[i + 1];
}
data.length = data.length - 1;
console.log(data);
}
</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 <input> with the placeholder of enter position.
- Now <button> with a onclick of the remove function.
- Create a <Script> tag to write Javascript within it.
- Using Let to create an array with some values.
- Using document.getElementById() with position value
- parseInt() to convert the string into an integer value
- Now create a for loop to by i less than array.length-1. within it set the array position to the next position
- Now set the array length to be the same as before
- After entering the position of the element we want to delete and clicking the remove element button, use console.log to display the array after deleting.
Conclusion :-
At last, here in conclusion, we can say that with this article’s help, we know how to delete element from array using JavaScript.
I hope this article on delete element from array JavaScript helps you and the steps and method mentioned above are easy to follow and implement.
About Riya
