---
title: "Delete Node Button"
description: "Delete selected nodes and blocks in Tiptap editors with keyboard shortcuts, intelligent selection handling, and accessibility support."
canonical_url: "https://tiptap.dev/docs/ui-components/components/delete-node-button"
---

# Delete Node Button

Delete selected nodes and blocks in Tiptap editors with keyboard shortcuts, intelligent selection handling, and accessibility support.

A fully accessible delete node button for Tiptap editors. Remove selected nodes or blocks from the editor with keyboard shortcut support and smart selection handling.

> **Interactive demo:** [delete node button](https://template.tiptap.dev/preview/tiptap-ui/delete-node-button)

## Installation

Add the component via the Tiptap CLI:

```bash
npx @tiptap/cli@latest add delete-node-button
```

## Components

### `<DeleteNodeButton />`

A prebuilt React component that deletes nodes from the editor.

#### Usage

```tsx
export default function MyEditor() {
  return (
    <DeleteNodeButton
      editor={editor}
      text="Delete"
      hideWhenUnavailable={true}
      showShortcut={true}
      onDeleted={() => console.log('Node deleted!')}
    />
  )
}
```

#### Props

| Name                  | Type             | Default     | Description                                     |
| --------------------- | ---------------- | ----------- | ----------------------------------------------- |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                      |
| `text`                | `string`         | `undefined` | Optional text label for the button              |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button when deletion is not available |
| `onDeleted`           | `() => void`     | `undefined` | Callback fired after a successful deletion      |
| `showShortcut`        | `boolean`        | `false`     | Shows a keyboard shortcut badge (if available)  |

## Hooks

### `useDeleteNode()`

A custom hook to build your own delete node button with full control over rendering and behavior.

#### Usage

```tsx
function MyDeleteNodeButton() {
  const { isVisible, handleDeleteNode, canDeleteNode, label, shortcutKeys, Icon } = useDeleteNode({
    editor: myEditor,
    hideWhenUnavailable: true,
    onDeleted: () => console.log('Node deleted!'),
  })

  if (!isVisible) return null

  return (
    <button onClick={handleDeleteNode} disabled={!canDeleteNode} aria-label={label}>
      <Icon />
      {label}
      {shortcutKeys && <Badge>{parseShortcutKeys({ shortcutKeys })}</Badge>}
    </button>
  )
}
```

#### Props

| Name                  | Type             | Default     | Description                                      |
| --------------------- | ---------------- | ----------- | ------------------------------------------------ |
| `editor`              | `Editor \| null` | `undefined` | The Tiptap editor instance                       |
| `hideWhenUnavailable` | `boolean`        | `false`     | Hides the button if deletion cannot be performed |
| `onDeleted`           | `() => void`     | `undefined` | Callback fired after successful deletion         |

#### Return Values

| Name               | Type            | Description                                      |
| ------------------ | --------------- | ------------------------------------------------ |
| `isVisible`        | `boolean`       | Whether the button should be rendered            |
| `canDeleteNode`    | `boolean`       | If a node can be deleted                         |
| `handleDeleteNode` | `() => boolean` | Function to delete the selected node             |
| `label`            | `string`        | Accessible label text for the button             |
| `shortcutKeys`     | `string`        | Keyboard shortcut (Backspace)                    |
| `Icon`             | `React.FC`      | Icon component for the delete button (TrashIcon) |

## Utilities

### `canDeleteNode(editor)`

Checks if a node can be deleted in the current editor state.

```tsx
import { canDeleteNode } from '@/components/tiptap-ui/delete-node-button'

const canDelete = canDeleteNode(editor)
```

### `deleteNode(editor)`

Programmatically deletes the selected node or block.

```tsx
import { deleteNode } from '@/components/tiptap-ui/delete-node-button'

const success = deleteNode(editor)
if (success) {
  console.log('Node deleted successfully!')
}
```

### `deleteNodeAtPosition(editor, pos, nodeSize)`

Low-level utility to delete a node at a specific position.

```tsx
import { deleteNodeAtPosition } from '@/components/tiptap-ui/delete-node-button'

const success = deleteNodeAtPosition(editor, position, nodeSize)
```

## Keyboard Shortcuts

The delete node button supports the following keyboard shortcut:

- **Backspace**: Delete the selected node or block

The shortcut is automatically registered when using either the `<DeleteNodeButton />` component or the `useDeleteNode()` hook. Note that this enhances the default backspace behavior to work with node selections.

## Requirements

### Dependencies

- `@tiptap/react` - Core Tiptap React integration
- `react-hotkeys-hook` - Keyboard shortcut management

### Referenced Components

- `use-tiptap-editor` (hook)
- `button` (primitive)
- `badge` (primitive)
- `tiptap-utils` (lib)
- `trash-icon` (icon)