Remove annotations

14 Jan 20262 minutes to read

You can remove annotations using the built-in UI or programmatically. This page shows the common ways to delete annotations in the viewer.

Delete via UI

You can delete a selected annotation in three ways:

  • Context menu: Right-click the annotation and choose Delete.
    Delete via context menu
  • Secondary 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

You can delete the currently selected annotation, or delete a specific annotation by its id.

<div class="toolbar">
  <button id="del">Delete Annotation</button>
  <button id="delbyId">Delete Annotation By ID</button>
</div>
<div id="PdfViewer" style="height: 700px; border: 1px solid #ccc;"></div>
// Inject required modules
ej.pdfviewer.PdfViewer.Inject(
  ej.pdfviewer.Toolbar,
  ej.pdfviewer.Magnification,
  ej.pdfviewer.Navigation,
  ej.pdfviewer.LinkAnnotation,
  ej.pdfviewer.ThumbnailView,
  ej.pdfviewer.BookmarkView,
  ej.pdfviewer.TextSelection,
  ej.pdfviewer.TextSearch,
  ej.pdfviewer.Print,
  ej.pdfviewer.Annotation,
  ej.pdfviewer.FormFields,
  ej.pdfviewer.FormDesigner
);

// Create viewer
var viewer = new ej.pdfviewer.PdfViewer({
  documentPath: 'https://cdn.syncfusion.com/content/pdf/pdf-succinctly.pdf',
  // Standalone resources
  resourceUrl: 'https://cdn.syncfusion.com/ej2/31.1.23/dist/ej2-pdfviewer-lib'
});
viewer.appendTo('#PdfViewer');

var delBtn = document.getElementById('del');
if (delBtn) {
  delBtn.addEventListener('click', function () {
    // Delete the selected annotation
    viewer.annotation.deleteAnnotation();
  });
}

var delByIdBtn = document.getElementById('delbyId');
if (delByIdBtn) {
  delByIdBtn.addEventListener('click', function () {
    // Delete the first annotation using its id from the annotation collection
    if (viewer.annotationCollection && viewer.annotationCollection.length > 0) {
      viewer.annotation.deleteAnnotationById(viewer.annotationCollection[0].id);
    }
  });
}

NOTE

Deleting via 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