How to create and remove a particular element from an array in JavaScript
How to create and remove a particular element from an array in JavaScript. In this Article , i will step through on how to do this. by coding a sample application .
In this Sample Application i will use a few JavaScript function listed below
- document.getElementById().innerHTML ,
- yourArrayName.push(),
- yourArrayName.length;
- yourArrayName.splice();
To create , i will need to create a few things. First a text box for the user to input the name of the object that the user want to insert into the Array. A button for the user to submit their input value. Then a text box for the user to enter the object name that to be remove from the array and a button to submit the action.
The Application is as below
Click the below button to see what is inside our Array Element
Enter an Element you want to create inside the Array :
Type the Array name that you waht to remove :
Check out how to create and remove a particular element from an array in JavaScript by learning how to code the above application
-
- As Usual create your Standard HTML Structure , Head , Body etc
- In this Sample program i will embed the JavaScript into the HTML file, just for easy explanation .But in real life is a bad paratice
- Check out on how to call external JavaScript file here
- First at the HTML create a paragraph tag, and ask the User to Click the below button to see what is inside our Array Element
- Create the Button for the user to click
- Inside the Button assign a “onclick=”outArray()” This outArray() method will be called when the button is being clicked
- Create a Paragraph tag with an ID named id=”outputArray” the List of item inside the Array will be printed in this paragraph tag
- Create an input box with an ID of “createArray” to ask the User to input the object name to be inserted into the Array
- Within the same paragraph tag , create a button and assign the onclick=”cArray(this.createarray);” to the button.
- The above button will be called when is being click
- Now let do the Same thing for the Remove Array section .
- Provide the input box with an ID of “removeArray”
- Create a button and assign the onclick=”rArray(this.removearray);”
- Now we done the HTML portion ,the first function that we need to create is call the function outArray() this function will output all the array objects reside in the Array element.
- Convert the Array to string and print the Result to the “outputArray” paragraph tag we have created earliar
- The next function that we need to create is function cArray(createarray) this function will push the value enter by the User into the Array element “newArray” using the newArray.push(createarray);
- The Last Function that we create is the ” function rArray(removearray) “ function . this method will remove the object enter by the user and remove it from the “newArray” element
- First i get the array length using the”.length” extension and then icreated a for loop to loop through the length of array contain inside.
- then i created an if condition. when the value key in by the user is same as the value found inside the array break out of the for loop
- Record the “i” Value which is the position of the object inside the Array
- Use the “newArray.splice(i, 1); “Where , the Array object at location”i” and remove 1 object starting at location “i”
- Well we are all set here, give yourself a pat , we have made it again
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
//This is a New Array
var newArray = [];
function outArray() {
newArray.toString();
document.getElementById("outputArray").innerHTML = newArray;
}
function cArray(createarray){
createarray = document.getElementById("createArray").value;
newArray.push(createarray);
}
function rArray(removearray){
removearray = document.getElementById("removeArray").value;
var arraylength = newArray.length;
// search for the position and splice
for(var i=0; i<arraylength;i++) {
if (removearray == newArray[i]){
newArray.splice(i, 1);
break;
}
}
}
</script>
</head>
<body>
<h2>Click the below button to see what is inside our Array Element</h2>
<P> <input type="button" value="Check what is inside" id="" onclick="outArray();"/></P>
<p id="outputArray"></p>
<P style="color:blue;"><strong>Enter an Element you want to create inside the Array :</strong><input type="text" style=
"text-align:center; margin-left: 10px;"id="createArray" name="element"
placeholder="Create Array" ><input type="button" style=
"text-align:center; margin-left: 10px;" value="Create an Array" id=""
onclick="cArray(this.createarray);"/></P>
<P style="color:blue;"><strong>Type the Array name that you waht to remove :</strong><input type="text" style=
"text-align:center; margin-left: 10px;"id="removeArray" name="remove"
placeholder="remove the Array" ><input type="button" style=
"text-align:center; margin-left: 10px;" value="Remove an Array" id=""
onclick="rArray(this.removearray);"/> </P>
</body>
</html>
There are tonnes of library and tutorial and explanation on this site , you can check out here
Leave a Reply