Skip to main content

​
Overview

The deleteElement method removes an element from a block.

​
Signature

editor.deleteElement(options: DeleteElementOptions): void

​
Parameters

​
options
DeleteElementOptions
required
Configuration object for deleting the element

​
Examples

​
Basic Usage

import { useYooptaEditor } from '@yoopta/editor';

function AccordionItem({ blockId, itemPath }: Props) {
  const editor = useYooptaEditor();

  const deleteItem = () => {
    editor.deleteElement({
      blockId,
      type: 'accordion-list-item',
      path: itemPath
    });
  };

  return <button onClick={deleteItem}>Delete</button>;
}

// Delete link at current selection (unwrap - keeps text)
editor.deleteElement({
  blockId: 'paragraph-1',
  type: 'link',
  // If path not specified, finds link in current selection
  mode: 'unwrap', // Removes link wrapper but keeps text
});

// Delete link completely (removes link and text)
editor.deleteElement({
  blockId: 'paragraph-1',
  type: 'link',
  mode: 'remove', // Removes entire link element
});

// Delete link by path
editor.deleteElement({
  blockId: 'paragraph-1',
  type: 'link',
  path: [0, 2], // Direct path to link element
  mode: 'unwrap',
});

​
Delete by Matcher

// Delete tab by ID
editor.deleteElement({
  blockId: 'tabs-1',
  type: 'tabs-item-heading',
  match: (el) => el.id === tabId
});

// Delete expanded accordion item
editor.deleteElement({
  blockId: 'accordion-1',
  type: 'accordion-list-item',
  match: (el) => el.props?.isExpanded === true
});

​
Delete by Path

// Delete at specific path
editor.deleteElement({
  blockId: 'table-1',
  type: 'table-data-cell',
  path: [0, 2, 1]
});

// Delete accordion item
editor.deleteElement({
  blockId: 'accordion-1',
  type: 'accordion-list-item',
  path: [0, 1]
});

​
Use Cases

​
Delete Tab

const deleteTab = (blockId: string, tabId: string) => {
  // Delete tab heading
  editor.deleteElement({
    blockId,
    type: 'tabs-item-heading',
    match: (el) => el.id === tabId
  });

  // Delete tab content
  editor.deleteElement({
    blockId,
    type: 'tabs-item-content',
    match: (el) => el.props?.referenceId === tabId
  });
};

​
Delete Empty Items

const deleteEmptyItems = (blockId: string) => {
  const items = editor.getElements({
    blockId,
    type: 'accordion-list-item'
  });

  items.forEach((item, index) => {
    const isEmpty = editor.isElementEmpty({
      blockId,
      type: 'accordion-list-item-content',
      path: [0, 0, index, 1]
    });

    if (isEmpty) {
      editor.deleteElement({
        blockId,
        type: 'accordion-list-item',
        path: [0, 0, index]
      });
    }
  });
};

​
Delete Table Column

const deleteTableColumn = (blockId: string, columnIndex: number) => {
  const rows = editor.getElements({
    blockId,
    type: 'table-row'
  });

  rows.forEach((row, rowIndex) => {
    editor.deleteElement({
      blockId,
      type: 'table-data-cell',
      path: [0, 0, rowIndex, columnIndex]
    });
  });
};

​
Remove Link from Text

// Remove link but keep the text
const removeLink = (blockId: string) => {
  editor.deleteElement({
    blockId,
    type: 'link',
    mode: 'unwrap', // Converts <link>text</link> to just "text"
  });
};

// Remove link completely
const removeLinkAndText = (blockId: string) => {
  editor.deleteElement({
    blockId,
    type: 'link',
    mode: 'remove', // Removes link and its text content
  });
};

​
Delete Mention

// Delete mention at selection
editor.deleteElement({
  blockId: 'paragraph-1',
  type: 'mention',
  // Finds mention in current selection
  mode: 'remove', // Removes mention completely
});

​
Notes

For inline elements (like link, mention), if path is not specified, the method will automatically search for the element in the current selection. This makes it easy to delete links or mentions where the cursor is positioned.
For inline elements, you can choose between two deletion modes:
  • 'unwrap' - Removes the inline wrapper but preserves the text content (default)
  • 'remove' - Completely removes the element and its content
For block elements, the element is always fully removed regardless of the mode option.
Be careful when deleting elements. There’s no undo for programmatic deletions (unless you implement it yourself).
If the element is not found, the operation will fail with a console warning. Consider checking if the element exists before deletion.
When deleting parent elements, all child elements are automatically deleted as well.

​
Type Definition

type DeleteElementOptions = {
  blockId: string;
  type: string;
  path?: number[]; // Direct Slate path
  match?: (element: SlateElement) => boolean;
  mode?: 'unwrap' | 'remove'; // Only for inline elements
};

getElement

Check element before deletion

insertElement

Create new elements

isElementEmpty

Check if element is empty

getElements

Get multiple elements for batch deletion