How to remove code programmatically

[ronaldohoch]

Hello Artf!

I have these use cases and i think i need the same solution in both cases.

The first is: When user click on Preview button, i need to add some javascripts to the page, so he can test a form integration on it, and when he goes back, i want to remove the javascript.
Second case: I need to create a panel that user will add the API Keys from GTM, Facebook Pixel, Google API Key and Google Fonts, in these case, i need to add in any moment, but i need the hability to remove it too.
All because, i need to save on the DB only the HTML and CSS of page.

Here the live Demo: https://jsfiddle.net/ar3s2mwh/

Edit: Also, my form component is working as it is described in Component & Js session of documentation.

Some prints:

Here i'm quering the element by myself and removing it.

Here you can see that it doesn't exist in the document anymore.

But when i call editor.getHtml(), the script is there @_@

And here, when i check the export modal.

So, i didn't find a way to safe remove an element from canvas and it update to the original returned file

[gustavohleal]

As we work together, we solved this problem by looking at API reference rsrs

I noticed that editor.Canvas gets the canvas itself as a html element of the page and manage him, not the elements dropped inside him.

The solution was use editor.DomComponents that actually works with what is inside the canvas. That means the elements we are inserting to edit and create a page or something.

So using this way:

  const body =  editor.DomComponents.getElements(); // Returns wrapper's children collection
  // Once we have the collection, we can work with that as a grapes Component object (see API Reference)
  let el = body.find("SomeQueryIdentifier"); // This will find the collection of elements that match the query and 
  //will also work as a Component object. Works only with already rendered components.
 
  // Then is just work with that element the way is needed and possible. 
  // For example, if you want do change some properties of it:
  el.setAttributes({ id: 'test', 'data-key': 'value' });

  // Or replace with some other element
  el.replaceWith("<div>Teste</div>")

And this is the easiest way to update or replace some element, including adding and removing scripts from the page.

[ronaldohoch]

Thank you Gustavo xD

For the next who try to do the same thing, here the working code of my sample:
https://jsfiddle.net/hke24d59/1/