Hii,

This post is in the continuation  with my previous post in which i had discussed about  inserting mutliple values in  an array using different method as per requirements and in this post i will discuss about removing element of an array as per requirements  using javascript.

Here is the list of method we can use to remove element  of an array.

• Delete method: Delete method is a type of method in which we use delete operation to delete elements of an array.Basically delete method is used to delete objects, and we know that javascript arrays are object so we can use delete operator to delete elements of an array.

Example: In this example index value defined is 1 hence elements till index value 1 will be deleted.Delete operator delete elements from the end of an array i.e from the last element of an array and leaves undefined holes in an array.

<button onclick="deleteData()">Try it</button>

<p id="outputArray"></p>

<script>
var languages = ["Hindi", "English", "French", "Spanish", "Chinese"];
document.getElementById("outputArray").innerHTML = languages;

function deleteData() {
    delete languages[1];
    document.getElementById("outputArray").innerHTML = languages[1];
}
</script>

• Array pop() method: pop() method is used when we want to removes the last element of an array. Delete method leaves undefined holes in an array while removing element out of an array that is why it is suggested to use pop method instead of using delete method.

•  Using pop() method we can remove one or more elements.

 Example: In this example elements will be removed from an array using pop method without leaving undefined holes in an array.

<button onclick="popData()">Try it</button>

<p id="outputArray"></p>

<script>
var languages = ["Hindi", "English", "French", "Spanish", "Chinese"];
document.getElementById("outputArray").innerHTML = languages;

function popData() {
    languages.pop();
    document.getElementById("outputArray").innerHTML = languages;
}
</script>

• Array shift() Method : shift() method is used when we want to removes the first element of an array. This method leaves undefined holes in an array while removing element out of an array that is why it is suggested to use shift method instead of using delete method.

• Using shift() method we can remove one or more elements.

Example: In this example elements will be removed from the beginning of an array using shift() method. While removing elements of an array shift method shifts the index value of array element and changes it to lower index value.

<button onclick="shiftData()">Try it</button>

<p id="outputArray"></p>

<script>
var languages = ["Hindi", "English", "French", "Spanish", "Chinese"];
document.getElementById("outputArray").innerHTML = languages;

function shiftData() {
    languages.shift();
    document.getElementById("outputArray").innerHTML = languages;
}
</script>

•   Array splice() method: splice() method is used when we want to either add items to an array  or remove items from an array. splice() method returns the removed item(s) and changes the original array if any item is removed otherwise array remains the same.

Like pop() and shift() method splice() method also to remove elements without leaving undefined holes in the array.

      ----->  In splice() method three parameter values is required,first parameter specifies the number of elements to be added and the second parameter specifies  the number of elements to be removed.

      ----->  Index value is required to identify position of items to be added or removed.

     ------>  No. of elements to be removed/added need to be specified. If no items will be removed then second parameter value is  set  to 0.similarly if no items will be added then first parameter value is set to 0.

Example: In this example elements will be  removed from an array.

<button onclick="spliceRemove()">Try it</button>
<p id="spliceArray"></p>
<script>
var languages = ["Hindi", "Chinese", "French"];
document.getElementById("spliceArray").innerHTML = languages;
function spliceRemove() {
languages.splice(0, 2);
document.getElementById("spliceArray").innerHTML = languages;
}
</script>