Salesforce LWC Remove element from array with a button click

Question

I am trying to remove an element from a dynamic array. Its an object type array and I want to delete the element with the object name field. The array is being shown with an iterate in lightning web component. The delete button is being show with the name field and when the delete button is being pressed the item should be deleted from the array.

html

<template for:each={fieldGrid} for:item="item">
        <div key={item} class="slds-grid slds-gutters">
            
            <div class="slds-col">
                <span>
                    <lightning-input name="fieldName" type="text" value={item.fieldName}></lightning-input>
                </span>
            </div>
            
            <div class="slds-col">
                <span>

                    <lightning-button-icon icon-name="utility:delete" variant="border-filled" alternative-text="Delete" 
                    class="slds-m-left_xx-large" title={item.fieldName} onclick={handleRemoveFields}></lightning-button-icon>
                </span>
            </div>
        </div>
      </template>

in js file

handleRemoveFields(event){
    console.log(event.target.title);       // this is showing title
    
    val = event.target.title;
 
    console.log(val);                      // this is coming blank

    index = this.fieldGrid.indexOf(val);
    this.fieldGrid.splice(index);

  }