How we can remove the selected component html
Question
Hi artf,
Please let us know how we can remove the selected component html like I have one button html and when i selected that "gjs-comp-selected" class is appended <button class="add_col_btn gjs-comp-selected" id="ir9j">Add New Column</button>
I want to remove this button html and replace with new content on particular event. Please help us to know how we can remove the selected component.
Answers (3)
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
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.j...
Related Questions and Answers
Continue research with similar issue discussions.
Issue #740
How to remove class from html
Hi @artf, We are updating the <i> tag class but it adds new class to this but previous class is not remove.please let us know how to remove...
Issue #906
[Question]How to change custom component content (html) from ajax?
Hi @artf, First of all thanks for this awesome plugin. Can you please let me know how i can update/change block content? I created custom b...
Issue #1111
How to add parent class when drag element
Hi @artf, Hope you are doing fine. Please let us know how we can add the parent class of div when new element is dragged inside that div li...
Issue #1090
How to remove toolbar icons
Hi artf, Please let me know how we can remove the toolbar icons like when user click on image element then I don't want delete icon or othe...
Paid Plugins That Match This Issue
Curated by issue keywords and label relevance to help you ship faster.
Loading paid plugin recommendations...
Check the open-source GrapesJS plugins on GitHub or run a quick search in our free catalog.
Browse free plugins →Premium plugins ship with support, regular updates, and production-ready features — save days of integration work.
Browse premium plugins →Related tutorials
In-depth guides on the same topic.
Browse Plugin Categories
Jump directly to plugin category pages on the marketplace.