Hey everyone. Welcome to today’s tutorial. In today’s tutorial, we will learn- how to delete a specific element from an array. To do so, we use javascript.
This is a beginner-friendly javascript tutorial. If you are looking for more such tutorials to help you improve your javascript skills, you can check out this playlist here. This playlist consists of a bunch of quick javascript tips, tricks and tutorials to help you improve your javascript skills.
Video Tutorial:
If you are interested to learn by watching a video tutorial instead of reading this blog post, you can check out the video down below. Also, subscribe to my youtube channel, where I post new and exciting tutorials every alternate day.
Project Folder Structure:
Now, before we start coding, let us take a look at the project folder structure. We create a main project called – ‘Delete Array Element’. Inside this folder, we have two more folders. We call the first one – ‘Delete First Occurrence’, and the second as – ‘Delete All Occurrences’.
Inside each of these folders are an index.html file and a style.css file. The first file is the HTML document and the second file is the stylesheet. I have included the javascript code in the body tag itself.
HTML & Javascript:
How To Delete Single Occurrence Of An Element From Array:
We begin with how to delete the first/single element occurrence in an array. To do this, we declare an array with some random value. Next, we declare a value to delete.
To find the index of the value to be deleted we the indexOf(). The indexOf() returns the first occurrence of the item. If not found, it returns -1. Now we check if the value to delete is present in the array. If yes, we use spice(). The splice() overwrites the original array.
The syntax of splice that we have used in this particular example is – Splice(indexOfItemToDel,NumberOfItemsToDel). By using splice(), we remove the item from the array.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delete First Occurence</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<p id="del-value"></p>
<p id="before-del"></p>
<p id="after-del"></p>
</div>
<!-- Script -->
<script>
//References To Display Array
let delValue = document.getElementById("del-value");
let arrBefore = document.getElementById("before-del");
let arrAfter = document.getElementById("after-del");
//Original Array
let arr = ["a", "b", "c", "d", "b"];
arrBefore.innerHTML = `<span>Before Deletion: </span> [${arr}]`;
//Value to del
let valToDel = "b";
delValue.innerHTML = `<span>Value To Del: </span> ${valToDel}`;
//indexOf(value) returns the first occurence of the value. If not found it return -1
let indOfVal = arr.indexOf(valToDel);
console.log(indOfVal);
//If the value to delete is present in array use splice
//Splice overwrites the original array
if (indOfVal != -1) {
/* Syntax used here:
Splice(indexOfItemToDel,NumberOfItemsToDel)*/
arr.splice(indOfVal, 1);
}
arrAfter.innerHTML = `<span>After Deletion: </span>[${arr}]`;
</script>
</body>
</html>
How To Delete Multiple Occurrences Of An Element From Array:
Next, we will learn how to delete multiple occurrences of an element from the array. Once again, to do so we use javascript. We start by creating references to display the array before deletion and the array after deletion.
In the next step, we declare an array and the value to be deleted. We use the filter() to filter out values that are not equal to the value to be deleted. This removes all the occurrences of a particular element from the array.
<!DOCTYPE html>
<html lang="en">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Delete All Occurences</title>
<!-- Stylesheet -->
<link rel="stylesheet" href="style.css" />
</head>
<body>
<div class="container">
<p id="del-value"></p>
<p id="before-del"></p>
<p id="after-del"></p>
</div>
<!-- Script -->
<script>
//References to display array
let delValue = document.getElementById("del-value");
let arrBefore = document.getElementById("before-del");
let arrAfter = document.getElementById("after-del");
//Original Array
let arr = ["a", "b", "c", "d", "b"];
arrBefore.innerHTML = `<span>Before Deletion:</span> [${arr}]`;
//Value To Delete
let valToDel = "b";
delValue.innerHTML = `<span>Value To Del: </span> ${valToDel}`;
//Using filter to filter out values that are not equal to the value to be deleted
arr = arr.filter((val) => val != valToDel);
arrAfter.innerHTML = `<span>After Deletion: </span> [${arr}]`;
</script>
</body>
</html>
CSS:
You can skip the CSS code since I have only used it to explain the output better and make it more presentable.
* {
padding: 0;
margin: 0;
box-sizing: border-box;
font-family: "Poppins", sans-serif;
}
body {
background-color: #fec150;
}
.container {
background-color: #151515;
color: #e5e5e5;
width: 550px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
font-size: 1.8em;
line-height: 2.5em;
padding: 2em 1.5em;
letter-spacing: 0.2em;
font-weight: 300;
border-radius: 0.3em;
}
span {
letter-spacing: 0.05em;
font-weight: 500;
color: #fec150;
}
If you face any issues while creating this code, you can download the source code by clicking on the ‘Download Code’ button below. Also, if you have any queries, suggestions or feedback you can comment on them below.
Happy Coding!
