How to delete non-required object over UI?

[Krivich]

General information

I'm using json-editor for editing my landing page config: create config; turn on/off section, edit fields in existing config.

export interface LandingBanner {
     id: number|string;
     text: string;
     starText?: string;
 }

 export interface LandingConfig {
  meta: {
      keywords: string;
      description: string;
      title: string
  };
  banner?: LandingBanner
  introduce: {
      motto?: string;
      multiMotto?: MultiMoto;
      description: string;
      authorizedAction: LandingAction;
      unauthorizedAction: LandingAction;
      subscribeHtml?: string;
      shareLink?: string
  };
  benefits?: {
      title?: string;
      items?: LandingBenefit[];
  }

There are two problems in usage of json-editor as composite objects editor:

1. Add non-required field/object to existing object. I'm using my PR to be able to do that: Option for editing of undefined non-required fields (bug with tables of objects) #980

2. How to completely delete non-required object from existing object? Is it possible to show "Delete" button to let used kill complete branch? For example, if user wants to delete optional banner from the example above.

I have idea to wrap optional objects with array where 0-1 items are allowed to use array's Delete button. But it will will bring rubbish into editable data model.

• json-editor version: 2.8.0

Expected behavior

"Delete" button in the header of the non-required object.

Actual behavior

No such button.

Steps to reproduce the behavior

Direct link to example: https://json-editor.github.io/json-editor/?data=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=

[germanbisurgi]

In the provided example the options disable_edit_json and disable_properties are set to true. That makes the editing of object editors less possible.

For the expected behaviour the property show_opt_in is best suited.

[schmunk42]

@Krivich See screenshot

[Krivich]

Thanks a lot! The show_opt_in options solved the problem