EventCallbacks

AlertBox.razor

<div class="alert alert-danger">
    @ChildContent
</div>

@code {
    [Parameter] public RenderFragment ChildContent { get; set; }
}

AlertList.razor

@typeparam TItem

@foreach (var item in Items)
{
    <AlertBox>
        @AlertTemplate(item)
        @if (OnDelete.HasDelegate)
        {
            <button @onclick="@(_ => HandleDelete(item))" type="button" class="close" data-dismiss="alert" aria-label="Close">
                <span aria-hidden="true">&times;</span>
            </button>
        }
    </AlertBox>
}

@code {

    [Parameter] public RenderFragment<TItem> ItemTemplate { get; set; }

    [Parameter] public IReadOnlyList<TItem> Items { get; set; }

    [Parameter] public EventCallback<object> OnDelete { get; set; }

    void HandleDelete(TItem item)
    {
        OnDelete.InvokeAsync(item);
    }
}

Counter.razor

@page "/counter"

<h1>Counter</h1>

<p>Current count: @alerts.Count()</p>

<button class="btn btn-primary" @onclick="IncrementCount">Click me</button>

<AlertList Items="alerts" Context="alert" OnDelete="DeleteItem">
    <ItemTemplate>
        <span>This is an alert @alert</span>
    </ItemTemplate>
</AlertList>

@code {

    List<int> alerts = new List<int>();

    private void IncrementCount()
    {
        alerts.Add(alerts.Count() +1);
    }

    void DeleteItem(object item)
    {
        alerts.Remove((int)item);
    }
}