Skip to content
Home

RemoveButton

Info
Demos
Properties

Import

import { Iterate } from '@dnb/eufemia/extensions/forms'
render(<Iterate.RemoveButton />)

Description

Iterate.RemoveButton connects to the array of a surrounding Iterate.Array and removes the item when clicked.

import { Iterate, Form, Field } from '@dnb/eufemia/extensions/forms'


render(
  <Form.Handler defaultData={{ myList: ['foo'] }}>
    <Iterate.Array path="/myList">
      <Iterate.RemoveButton text="Remove item" />
    </Iterate.Array>
  </Form.Handler>,
)

Confirm removal

You can use the showConfirmDialog property to open a confirmation dialog before removing the item.

<Iterate.RemoveButton showConfirmDialog />

The item number in the title

You can use the {itemNo} variable in the text or the children property to display the current item number.

import { Iterate, Field, Value } from '@dnb/eufemia/extensions/forms'


render(
  <Form.Handler defaultData={{ myList: ['foo'] }}>
    <Iterate.Array path="/myList">
      <Iterate.RemoveButton text="Remove item {itemNo}" />
    </Iterate.Array>
  </Form.Handler>,
)