How can I remove the single image from an array in ionic 3?

I'm trying to save the images that I am getting from the user for the ID-Proof and Address-Proof and saves it in the database. While doing so., I'm also having separate button for removing the images( for both ID and address-proofs) I am sending both the images in an array, after converting them to the base64 format. Now the problem is that, there's 2 fields here ID-Proof and Address-Proof. Now consider if I have attached the images in both the fields(ID & address Proofs) and if I removes any one of them (i.e., either ID or address) the other image also gets deleted. I want to remove only the item which I'm removing. (If I'm removing the ID-Proof image, then the ID-Proof image should alone get removed, not the address-proof image & Vice-versa). I'm using alert-dialog for confirmation before removing them. Please tell me where I went wrong., Kindly need your help to resolve the issue.

Here's what I've done so far.

In my HTML:

<ion-content class="ioncontent-background" no-bounce padding scroll="true">
  <form [formGroup]="formattach">


        <ion-label color= "white" style="text-align: center !important; font-size: 18px;" > ATTACHMENTS DETAILS </ion-label>



    <ion-row formContrtolName = " Idattach" >
            <ion-col col-6 class = "rowborderclass">
                <ion-label style="margin-left:-2%; font-size: 16px;" color = "textcolor">ID-Proof </ion-label>  
            <span class = "idspanclass" >{{idProofImage}} </span>

            </ion-col>

            <ion-col col-2>
                    <ion-fab right   #fab>

                        <button ion-fab mini class="fab-mini-style" (click)="onCameraClick(1,fab,11)" >
                            <ion-icon color="white" name="camera"></ion-icon>
                        </button>
                        </ion-fab>
                        </ion-col>
                        <ion-col col-2>
                                <ion-fab right   #fab>

                                    <button ion-fab mini class="fab-mini-style" (click)="onCameraClick(2,fab,11)" >
                                        <ion-icon color="white" name="images"></ion-icon>
                                    </button>
                                    </ion-fab>
                                    </ion-col>
                                    <ion-col col-2>
                                            <ion-fab right   #fab>

                                                <button ion-fab mini class="fab-mini-style" (click)="click($event,fab)" >
                                                    <ion-icon color="white" name="close"></ion-icon>
                                                </button>
                                                </ion-fab>
                                                </ion-col>


                        </ion-row>


        <ion-row style="padding-top: 10%; "  formContrtolName = "addressattach" >
                <ion-col col-6 class = "rowborderclass">
                        <ion-label style="margin-left:-2%; font-size: 16px;" color = "textcolor">Address-Proof </ion-label> 

                        <span class = "idspanclass" >{{addressProofImage}} </span>

                </ion-col>

                <ion-col col-2>
                        <ion-fab right   #fab>

                            <button ion-fab mini class="fab-mini-style" (click)="onCameraClick(1,fab,22)" >
                                <ion-icon color="white" name="camera"></ion-icon>
                            </button>
                            </ion-fab>
                            </ion-col>
                            <ion-col col-2>
                                    <ion-fab right   #fab>

                                        <button ion-fab mini class="fab-mini-style" (click)="onCameraClick(2,fab,22)" >
                                            <ion-icon color="white" name="images"></ion-icon>
                                        </button>
                                        </ion-fab>
                                        </ion-col>

                                        <ion-col col-2>
                                                <ion-fab right   #fab>

                                                    <button ion-fab mini class="fab-mini-style" (click)="myclick($event,fab)" >
                                                        <ion-icon color="white" name="close"></ion-icon>
                                                    </button>
                                                    </ion-fab>
                                                    </ion-col>
                                                     </ion-row>
            <ion-item no-lines>
                <div class="button-bar">
                    <button ion-button icon-end name="submitbutton" (click)="submit()" style="margin-top: 25%" class="button" color="purple">
                        Submit
                        <ion-icon name="md-checkmark-circle"></ion-icon>
                    </button>
                </div>
            </ion-item>

        </form>
    </ion-content>  

In my TS:

import { Component, NgZone, ViewChild } from '@angular/core';
import { IonicPage, NavController, NavParams, App, AlertController, Events, FabContainer } from 'ionic-angular';
import { FormControl, Validators, FormGroup, AbstractControl } from '@angular/forms';
import { Attachment } from '../../models/attachment'
import { isNullOrUndefined } from 'util';
import { MessageService } from "../../services/message.service";
import { EmpAttService } from "../../services/empattachment.service";
import { EmployeeBankingDetailsPage } from "../employee-banking-details/employee-banking-details"
import { Camera, CameraOptions } from '@ionic-native/camera';
import { FileChooser } from '@ionic-native/file-chooser';
import { FileOpener } from '@ionic-native/file-opener';
import { FilePath } from '@ionic-native/file-path';
import { FileTransfer } from '@ionic-native/file-transfer';
import { File } from '@ionic-native/file';
import { Base64 } from '@ionic-native/base64';
import { BroadCastService } from '../../services/broadcast.service';
import { AuthenticationService } from '../../services/authentication.service';

/**
 * Generated class for the AttachmentsPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
    selector: 'page-attachments',
    templateUrl: 'attachments.html',
    providers: [AuthenticationService, MessageService, Camera, EmpAttService, FileChooser, FileOpener, FilePath, FileTransfer, File, Base64]
})
export class AttachmentsPage {
    @ViewChild('fab')
    fabRef: FabContainer;
    vm: Attachment;
    service: any;
    formattach: FormGroup;
    value: any;
    isAdded: boolean = false;
    idProofImage: string;
    addressProofImage: string;

    list = [];
    public n: any;
    files: any[];
    attachment = new Attachment();
    message: any;
    todayDate: any;
    newFileName: any;
    attach: any;
    public dateToday: any;
    createFile: AbstractControl;
    photoencodetype: number;
    datas: any;
    filetypename: any;

    public unregisterBackButtonAction: any;
    constructor(public navCtrl: NavController, public alertctr: AlertController, private camera: Camera, public authService: EmpAttService, authenticationservice: EmpAttService, private filechooser: FileChooser,
        public broadCastService: BroadCastService,
        private filepath: FilePath,
        private base64: Base64,
        message: MessageService,
        public navParams: NavParams,
        private event: Events,
        public app: App) {
        this.attach = {};
        this.vm = new Attachment();
        this.files = [];
        this.message = message;
        this.idProofImage = "";
        this.addressProofImage = "";
        this.isAdded = false;

    }
    ngOnInit() {
        this.initializeValidators();
    }
    submit() {
        if (this.formattach.valid)
         {
          debugger;
          this.attach.files = this.files;
          this.attach.user_id = localStorage.getItem('userid');
          debugger;
           this.authService.saveempaattach(this.attach).subscribe(res=> {
             debugger;
             if (!isNullOrUndefined(res)) {
               console.log("Message" + res);
               this.message.alert("Details has been submitted successfully");
               this.resetForm(this.formattach);



        this.navCtrl.push(EmployeeBankingDetailsPage);


    }
    })
    }
    }


    ionViewDidEnter() {
        this.resetForm(this.formattach)
    }


initializeValidators() {
        this.formattach = new FormGroup({
            Idattach: new FormControl('', Validators.required),
            addressattach: new FormControl('', Validators.required)


        });
    }
    resetForm(formGroup: FormGroup) {
        let control: AbstractControl = null;
        formGroup.reset();
        formGroup.markAsUntouched();
        this.vm.attach = "ID-Proof";
        this.vm.attach = "Address-Proof";

        Object.keys(formGroup.controls).forEach((name) => {
            control = formGroup.controls[name];
            control.setErrors(null);
        });
        this.initializeValidators();
    }
    validateFormControl(formGroup: FormGroup) {
        Object.keys(formGroup.controls).forEach(field => {
            const control = formGroup.get(field);
            if (control instanceof FormControl) {
                control.markAsTouched({ onlySelf: true });
            } else if (control instanceof FormGroup) {
                this.validateFormControl(control);
            }
        });
    }


    ionViewDidLoad() {
        console.log('ionViewDidLoad AttachmentsPage');
    }
    createFileName() {
        this.todayDate = new Date();
        this.dateToday = (this.todayDate.getDate() + '/' + ((this.todayDate.getMonth() + 1)) + '/' + this.todayDate.getFullYear() + ' ' + this.todayDate.getHours() + ':' + this.todayDate.getMinutes() + ':' + this.todayDate.getSeconds()),
            this.newFileName = this.dateToday;
        // if(this.newFileName == this.addressProofImage){
        //   this.newFileName = "Address-Proof " + this.dateToday;

        // }
        return this.newFileName;
    }

    onCameraClick(sourceType, fab: FabContainer, fileType) {
        debugger;

        fab.close();
        const options: CameraOptions = {
            quality: 25,
            destinationType: this.camera.DestinationType.DATA_URL,
            encodingType: this.camera.EncodingType.JPEG,
            mediaType: this.camera.MediaType.PICTURE,
            sourceType: sourceType
        };


        this.camera.getPicture(options).then((imageUri) => {

            console.log(imageUri);
            // alert('Test' + this.camera.EncodingType.JPEG);
            // this.photoencodetype = this.camera.EncodingType.JPEG;
            //this.files = [];

            let currentName = this.createFileName() + "" + ".jpg";
            let base64Image = 'data:image/jpg;base64,' + imageUri;
            // this.createFileName = this.newFileName;
            // currentName = this.form.controls['attachment'];
            //  this.message.alert('Uploaded Successfully '+ currentName);
            if (fileType == "11") {
                //this.files = [];
                debugger;
                //alert("Source Type="+ sourceType + " " + "File Type=" + fileType)
                //currentName = this.idProofImage;
                this.idProofImage = "ID-Proof" + ' ' + currentName;
                this.files.push({ filename: currentName, type: "id_proof", data: base64Image });

                // this.vm.attach = currentName;
                //this.idProofImage = currentName;
            }
            if (fileType == "22") {
                //this.files = [];
                debugger;
                // currentName = this.addressProofImage;
                //alert("Source Type="+ sourceType + " " + "File Type=" + fileType)
                //this.addressProofImage = currentName;
                this.addressProofImage = "Add-Proof" + ' ' + currentName;
                this.files.push({ filename: currentName, type: "address_proof", data: base64Image });



            }
            this.isAdded = true;

        }, (error) => {
            console.log(error);
        });

    }

    click(event, fab: FabContainer) {
        debugger;
        if (this.isAdded) {
            let alert = this.alertctr.create({
                cssClass: 'alert-confirmation',
                title: 'Confirm Remove!',
                message: 'Are you sure you want to remove the attachement?',
                buttons: [
                    {
                        text: 'No',
                        handler: () => {
                            console.log('Cancel clicked');
                        }
                    },
                    {
                        text: 'Yes',
                        handler: () => {
                            this.isAdded = false;
                            debugger;
                            this.files.forEach(data => {
                                if (data && data.type == 'id-proof') {
                                    this.files.splice(data, 1)

                                }
                            });
                            this.files.pop();
                            this.idProofImage = "";
                        }
                    }
                ]
            });
            alert.present().then(() => {
                fab.close();
            });
        }
    }


    myclick(event, fab: FabContainer) {
        debugger;
        if (this.isAdded) {
            let alert = this.alertctr.create({
                cssClass: 'alert-confirmation',
                title: 'Confirm Remove!',
                message: 'Are you sure you want to remove the attachement ?',
                buttons: [
                    {
                        text: 'No',
                        handler: () => {
                            console.log('Cancel clicked');
                        }
                    },
                    {
                        text: 'Yes',
                        handler: () => {
                            this.isAdded = false;
                            this.files.forEach(data => {
                                if (data && data.type == 'address-proof') {
                                    this.files.splice(data, 1)

                                }
                            });
                            //this.files.pop();
                            this.addressProofImage = "";
                        }
                    }
                ]
            });
            alert.present().then(() => {
                fab.close();
            });
        }
    }



}