Delete by index doesn't works. Angular

You need to add a trackBy so that angular can know the element which was removed, something like

HTML

<div *ngFor="let item of inputs; let i = index" class="form-row mb-2" trackBy: customTB>
   <input id="inputField{{i}}" type="text" class="form-control col-sm-9" name="inputField{{i}}" >
   <button (click)="remove(i)" type="button" class="btn btn-danger col-sm-offset-2 col-sm-2 ml-4">Remove</button>
</div>

TS file add the below function

customTB(index, song) { return `${index}-${song.id}`; }

It is also important to note that angular will only update the UI in the *ngFor directive if the input change

Consider below.

You add the four elements to inputs and your inputs look like below

[true, true, true, true]

Lets Remove the 3rd Element

[true, true, true]

What if I was to remove the 1st Element instead of the 3rd

[true, true, true]

Since the input is the same after both removing the 1st and 3rd ELements, angular optimization will remove the last elemen,

Now Lets amend the code

TS

inputs: string[] = [];

    public addNew(): void {
    this.inputs.push('');
  }

  public remove( index: number): void {
   this.inputs.splice(index, 1);
   console.log(index);
  }

HTML

 <div class="form-row  pb-2">
   <input id="field_id" type="text" class="form-control col-sm-9" name="field_id"
              ngModel>
<button type="button" (click)="addNew()" [disabled]="inputs.length > 3" >+ Add</button>
</div>
<div *ngFor="let item of inputs; index as i" class="form-row mb-2">
  <input [(ngModel)]='inputs[i]' id="inputField{{i}}" type="text" name="inputField{{i}}" >
  <button (click)="remove(i)" type="button">Remove</button>
</div>

The above will work as long as the input is NOT the same. To ensure this always works, we add the trackBy.

Sample on Stackblitz

Your code is working fine. Its not deleting the last element. Whats happening is that the splice method deletes the corresponding element in the array, and then the array length is updated accordingly. So, lets say that you have 4 elements in your array:

test = [0,1,2,3] //(using numbers just so its clearer)

Now I apply the splice method like this:

test.splice(2,1);

The result will be:

[0,1,3]

The element in the corresponding index was deleted, but the lenght of my array also changed (I have one less element now). Once this happens, angular updates the dom with the remaining elements of your array. It just looks like its deleting the last element, but its not.

I think the Array.prototype.filter() function is the best way to do this:

let inputs = ['alpha', 'beta', 'gamma', 'delta'];
let index = 2
inputs = inputs.filter((input, i) => i !== index);
console.log(inputs); // ['alpha', 'beta', 'delta']