How to clear the WYSIWYG mathquill editor?

At this address: http://jenseng.github.io/mathquill/demo.html

I open a web console and type:

$(document.getElementsByClassName("mathquill-editor")).mathquill('latex','')

It successfully clears the WYSIWYG editor at the bottom of the page, but then I can't type anything else in. It also moves the cursor from the left side to the right side. Any ideas how to make the text box editable and move the cursor to the left again?

This seems to happen because when you run .mathquill('latex', info), it also removes the necessary elements to use the editor. The editor ($('.mathquill-editor')) needs its first 2 children to be able to function, the rest are part of mathquill.

The main way to clear it is the following:

while ($('.mathquill-editor').children().length > 2)
    $('.mathquill-editor').children()[2].remove();
$('.mathquill-editor').addClass('empty');

But I will also include a more dynamic way, in case the above code doesn't work on another website and/or the classname isn't the same.

JQuery

function clearEditor(elem) {
    while ($(elem).children().length > 2)
        $(elem).children()[2].remove();
    $(elem).addClass('empty');
}
clearEditor('.mathquill-editor');

Pure Javascript

function clearEditor(elem) {
    while (document.querySelector(elem).children.length > 2)
        document.querySelector(elem).children[2].remove();
    document.querySelector(elem).setAttribute('class', document.querySelector(elem).getAttribute('class') + ' empty');
}
clearEditor('.mathquill-editor');