All TalkersCode Topics

Follow TalkersCode On Social Media

devloprr.com - A Social Media Network for developers Join Now ➔

Delete Element From Array JavaScript

Last Updated : Jul 1, 2023

Delete Element From Array JavaScript

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>
  1. First, we write <! DOCTYPE html> to mention the version of the HTML file
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Attach an external CSS file using <link> tag
  5. <h1> tag used to add heading here and also adding the inline CSS here.
  6. Create a <Script> tag to write Javascript within it.
  7. Using Let to create an array with some values.
  8. Set the value of the position of the array element that we want to delete
  9. Now create a for loop to by i less than array.length-1 . within it set the array position to the next position
  10. Now set the array length to be same as before
  11. 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>
  1. First, we write <! DOCTYPE html> to mention the version of the HTML file
  2. Secondly, the <html> tag is used to indicate the beginning of an HTML document.
  3. Both <head> and <title> tags are Paired tags. So, both have </head> and </title> ending tags respectively.
  4. Attach an external CSS file using <link> tag
  5. <h1> tag used to add heading here and also adding the inline CSS here.
  6. Create a <input> with the placeholder of enter position.
  7. Now <button> with a onclick of the remove function.
  8. Create a <Script> tag to write Javascript within it.
  9. Using Let to create an array with some values.
  10. Using document.getElementById() with position value
  11. parseInt() to convert the string into an integer value
  12. Now create a for loop to by i less than array.length-1. within it set the array position to the next position
  13. Now set the array length to be the same as before
  14. 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.

Author Image About Riya

A recent graduate with a Bachelor of Technology (B.Tech) in Computer Science from India. She is passionate about leveraging technology to solve real-world problems. With a strong foundation and experience in programming languages such as Python, Django, HTML, CSS, and JavaScript, java, php and have honed her skills through hands-on projects and coursework.

Follow Riya On Linkedin 🡪