HelpBot Assistant

How can I help you?

Remove annotations in React

3 Mar 20262 minutes to read

Annotations can be removed using the built-in UI or programmatically. This page shows common methods to delete annotations in the viewer.

Delete via UI

A selected annotation can be deleted in three ways:

  • Context menu: right-click the annotation and choose Delete.
    Delete via context menu
  • Annotation toolbar: select the annotation and click the Delete button on the annotation toolbar.
    Delete via annotation toolbar
  • Keyboard: select the annotation and press the Delete key.

Delete programmatically

Annotations can be deleted programmatically either by removing the currently selected annotation or by specifying an annotation id.

import * as React from 'react';
import * as ReactDOM from 'react-dom/client';
import { PdfViewerComponent, Inject, Toolbar, Annotation, TextSelection } from '@syncfusion/ej2-react-pdfviewer';

function getViewer() { return document.getElementById('container').ej2_instances[0]; }

function deleteAnnotation() {
  // Delete the selected annotation
  getViewer().annotation.deleteAnnotation();
}

function deleteAnnotationById() {
  const viewer = getViewer();
  // Delete the first annotation using its id from the annotation collection
  if (viewer.annotationCollection.length > 0) {
    viewer.annotation.deleteAnnotationById(viewer.annotationCollection[0].id);
  }
}

function App() {
  return (
    <>
      <button onClick={deleteAnnotation}>Delete Annotation</button>
      <button onClick={deleteAnnotationById}>Delete Annotation By ID</button>
      <PdfViewerComponent
        id="container"
        documentPath="https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf"
        resourceUrl="https://cdn.syncfusion.com/ej2/31.2.2/dist/ej2-pdfviewer-lib"
        style={{ height: '650px' }}
      >
        <Inject services={[Toolbar, Annotation, TextSelection]} />
      </PdfViewerComponent>
    </>
  );
}

ReactDOM.createRoot(document.getElementById('sample')).render(<App />);

NOTE

Deleting via the API requires the annotation to exist in the current document. Ensure an annotation is selected when using deleteAnnotation(), or pass a valid id to deleteAnnotationById().

View Sample on GitHub

See also