How we can remove the selected component html

You can do something like this

const component = editor.getSelected();
const coll = component.collection;
const at = coll.indexOf(component);
coll.remove(component);
return coll.add('<div>New content</div>', { at });

This has helped me a lot with programatically removing components and I just want to add some example code in Typescript for further reference.

Typescript Example: Dynamically remove components

All components are removed that ..

• .. have a tagname = exampletag
• .. have an attribute = exampleattr

  /**
   * Removes all components from editor, that have a tag 'exampletag' and contain an attribute 'exampleattr'.
   */
  clearComponentsFromEditor(): void {

    let allComponents  = this.editor.getComponents();
    let componentsToBeRemoved = allComponents.filter(
      componentModel => (
        componentModel.attributes['tagName'] == 'exampletag' && null != componentModel.attributes.attributes['exampleattr'])  )
    );
    
    for(let comp of componentsToBeRemoved) {
      if(null != comp && null != comp.collection)
        comp.collection.remove(comp);
    }
  }

Hi artf,

Thanks for the message and provided code is working fine but i am getting below error:

Uncaught TypeError: Cannot read property 'indexOf' of undefined at HTMLDivElement.<anonymous> (template.js?1.15:3784) at HTMLDivElement.dispatch (jquery.min.js:5) at HTMLDivElement.v.handle (jquery.min.js:5) at ZoneDelegate.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421) at Zone.webpackJsonp.../../../../zone.js/dist/zone.js.Zone.runTask (zone.js:188) at ZoneTask.webpackJsonp.../../../../zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:496) at invokeTask (zone.js:1517) at HTMLDivElement.globalZoneAwareCallback (zone.js:1543)