splice can't remove the first element in javascript

Question

In angular2, my HTML is calling removeThisForm in javascript. The event is an object of File Array. For each object in File Array, I generate a form in angular2.

(click)=removeThisForm(event)

In javascript, I am trying to remove the file that is passing in.

removeThisForm(file) {
    var removableIndex = arr.indexOf(file);
    if (removeIndex >= 0) {
        arr = arr.splice(removableIndex);
    } 

I am able to remove any form passing in, except the first one. I tried shift(), slice() and splice(0,1). When I did splice(0,1), I am getting an error of "Form submission canceled because the form is not connected".

Answer 1

You've omitted to pass second argument to the Array.prototype.splice method (an integer representing the number of elements to be deleted). Try this:

removeThisForm(file) {
    var removableIndex = arr.indexOf(file);
    if (removeIndex >= 0) {
        arr.splice(removableIndex, 1);
    } 
}

Also, the Array.prototype.splice method returns an array containing the deleted elements. Therefore, you can't say:

arr = arr.splice(removableIndex, 1);

as it will override your arr with the returned value of Array.prototype.splice method.