1. Home
  2. Forum
  3. Blazor
  4. How to Remove sfcard

How to Remove sfcard

I have write a below code to load card dynamically, It works fine I would like to know how to remove selected card when I click on button.


<div class="row">

    <div class="control-section col-lg-12 card-control-section tile_layout">

        <div class="row e-card-layout">

            @foreach (ApproveHeader card in authenticationService.UserApproveList)

            {

                <div class="col-lg-12 col-md-12 col-sm-12" style="padding: 15px;">

                    <div id="card_sample_1" class="card_sample">

                        <SfCard>

                            <CardContent Content="@card.Description" />

                            <CardFooter>

                                <CardFooterContent>

                                    <SfButton CssClass="e-btn e-success" style="text-transform:capitalize" OnClick="@(() => OnApproveClicked(card))">Approve</SfButton>

                                    <SfButton CssClass="e-btn e-warning" style="text-transform:capitalize" OnClick="@(() => OnRejectClicked(card))">Reject</SfButton>

                                    <SfButton CssClass="e-btn e-primary" style="text-transform:capitalize" OnClick="@(() => OnDetailsClicked(card))">Details</SfButton>

                                    @*<SfButton CssClass="e-btn e-outline e-info">Details</SfButton>*@

                                </CardFooterContent>

                            </CardFooter>

                        </SfCard>

                    </div>

                </div>

            }

        </div>

    </div>

</div>


1 Reply
VJ Vinitha Jeyakumar Syncfusion Team February 15, 2022 03:07 PM UTC

Hi Kins,


We have created a sample as per your requirement to remove the card on button click using the jsInterop methods. please check the code below,

Code snippet:
<div class="row">
    <div class="control-section col-lg-12 card-control-section tile_layout">
        <div class="row e-card-layout">
            @foreach (var card in InputList)
            {
                <div class="col-lg-12 col-md-12 col-sm-12" style="padding: 15px;">
                    <div id="card_sample_1" class="card_sample">
                        <SfCard ID="@card.Id">
                            <CardContent Content="@card.Description" />
                            <CardFooter>
                                <CardFooterContent>
                                    <SfButton CssClass="e-btn e-warning" style="text-transform:capitalize" OnClick="@(() => OnRejectClicked(card.Id))">Reject</SfButton>
                                </CardFooterContent>
                            </CardFooter>
                        </SfCard>
                    </div>
                </div>}
        </div>

    </div>
</div>
@code{
    public List<InputClass> InputList { get; set; }
    protected override void OnInitialized()
    {
        base.OnInitialized();
        InputList = new List<InputClass>();
        InputList.Add(new InputClass {Id = "Card 1", Description ="Card 1" });
        InputList.Add(new InputClass { Id = "Card 2", Description = "Card 2" });
        InputList.Add(new InputClass { Id = "Card 3", Description = "Card 3" });
        InputList.Add(new InputClass { Id = "Card 4", Description = "Card 4" });
    }
    public class InputClass
    {
        public string Id { get; set; }
        public string Description { get; set; }
    }
    private bool VisibleProperty { get; set; } = false;
    public async Task OnRejectClicked(string id)
    {
        await jsRuntime.InvokeAsync<object>("accessDOMElement", id);
    }
    private async Task ClickHandler()
    {
        this.VisibleProperty = true;
    }
}
Host.cshtml
<script>
        function accessDOMElement(id) {
                var myobj = document.getElementById(id);
                myobj.remove();
      }
    </script>


Regards,
Vinitha


Loader.
Up arrow icon