Remove PDF form fields in JavaScript

A form field can be removed by deleting its widget annotations. This will remove the ability to interact with the form field since widget annotations represent the appearances of form fields in a PDF document.

Remove all widgets and fields

When you delete a widget annotation its associated field will also be deleted (unless the field still has other associated widgets). In this code sample we delete all widgets which automatically delete all fields.

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager, Annotations } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const annots = annotationManager.getAnnotationsList();

      // Get all widget annotations.
      const widgetAnnots = annots.filter(a => a instanceof Annotations.WidgetAnnotation)

      // Remove the widget annotations.
      // Associated fields will automatically be deleted.
      annotationManager.deleteAnnotations(widgetAnnots);
    });
  });

WebViewerInstance DocumentViewer#annotationsLoaded AnnotationManager.getAnnotationsList Annotations.WidgetAnnotation AnnotationManager.deleteAnnotations

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager, Annotations } = instance;

    docViewer.on('annotationsLoaded', () => {
      const annots = annotManager.getAnnotationsList();

      // Get all widget annotations.
      const widgetAnnots = annots.filter(a => a instanceof Annotations.WidgetAnnotation)

      // Remove the widget annotations.
      // Associated fields will automatically be deleted.
      annotManager.deleteAnnotations(widgetAnnots);
    });
  });

WebViewerInstance DocumentViewer#annotationsLoaded AnnotationManager.getAnnotationsList Annotations.WidgetAnnotation AnnotationManager.deleteAnnotations

Remove widgets and fields by name

To remove a specific field, find the field by its name and then delete the associated widget annotations.

JavaScript (SDK v8.0+)

WebViewer(...)
  .then(instance => {
    const { documentViewer, annotationManager } = instance.Core;

    documentViewer.addEventListener('annotationsLoaded', () => {
      const fieldManager = annotationManager.getFieldManager();
      const field = fieldManager.getField('fieldName');
      if (field) {
        annotationManager.deleteAnnotations(field.widgets);
      }
    });
  });

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField Annotations.WidgetFlags AnnotationManager.deleteAnnotations

JavaScript (SDK v6.0+)

WebViewer(...)
  .then(instance => {
    const { docViewer, annotManager } = instance;

    docViewer.on('annotationsLoaded', () => {
      const fieldManager = annotManager.getFieldManager();
      const field = fieldManager.getField('fieldName');
      if (field) {
        annotManager.deleteAnnotations(field.widgets);
      }
    });
  });

DocumentViewer.getAnnotationsLoadedPromise DocumentViewer#documentLoaded AnnotationManager.getFieldManager FieldManager.getField Annotations.WidgetFlags AnnotationManager.deleteAnnotations