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>,
)

Demos

Primitive items

Code Editor
<Iterate.Array
  value={['One', 'Two', 'Three', 'Four', 'Five']}
  onChange={(value) => console.log('onChange', value)}
>
  <Flex.Horizontal align="center">
    <Field.String itemPath="/" />
    <Iterate.RemoveButton
      icon={TrashIcon}
      onChange={(value) => console.log('onChange', value)}
    />
  </Flex.Horizontal>
</Iterate.Array>

Object items

Code Editor
<Form.Handler
  data={[
    {
      name: 'Iron Man',
    },
    {
      name: 'Captain America',
    },
    {
      name: 'Thor',
    },
  ]}
  onChange={(value) => console.log('onChange', value)}
>
  <Iterate.Array path="/">
    <Flex.Horizontal align="center">
      <Field.Name.Last itemPath="/name" />
      <Iterate.RemoveButton text="Remove avenger" />
    </Flex.Horizontal>
  </Iterate.Array>
</Form.Handler>