How to: completely remove editor from DOM and JS

[belyanskii]

Hi guys!
I search for some good practices to completely remove editor from page. I need to create many instances of editor and delete them, but delete only DOM node is wrong, because i still have event-listeners and JS instances of editors. I try to use destroy method ace.editor('id').destroy(), but they leave DOM node and i don't understand what they do, because my editor still works.

[matthewkastor]

It sounds like you're doing it wrong. . . Try frames if it's too hard. You can create and destroy iframes and it will effectively do what you're asking.

[belyanskii]

@matthewkastor
at http://ace.c9.io/

• Go to console
• Get editor by ace.edit('ace_editor_demo')
• Try to call ace.edit('ace_editor_demo').destroy()

What is happening there, this is the correct behavior?

[nightwing]

@matthewkastor i think using iframe for every editor will create lots of unnecessary overhead.

@belyanskii editor.destroy() clears interval that polls for font size changes. with #2087 it will also terminate syntax checking worker of the session.

It doesn't remove dom nodes and event listeners so you need to additionally do something like editor.container.remove() or editor.container.parentNode.replaceChild(editor.container.cloneNode(true), editor.container)

[matthewkastor]

XD well yeah, @nightwing XD every time the frame is recreated ace would have to load in it. Your idea works too, deleting and replacing dom nodes, then creating a new session, it just doesn't have the encapsulation that laying it all in a iframe does. Personally, I'd use your method because it will be faster.

[belyanskii]

@matthewkastor thanks for idea with iframes!
and
@nightwing thanks for this examples, i will use this method :)

[ldong]

What I did was,

1. using editor to destroy itself to avoid memory leak
2. using jQuery to get the ace editor and remove form the DOM

editor.destroy();

$editor = $('ACE_ID');
$editor.remove();