0

I'm using mathquill to render some latex. I have an editable mathquill element.

I would like to know how to programmatically clear the content.

When I manually clear it (backspace), everything works fine but if I remove elements from the DOM with jQuery it seems like some cache is used since I get old values contatenated with the new ones.

Can someone help me please ?

Thanks

marc_s
  • 732,580
  • 175
  • 1,330
  • 1,459
user2401221
  • 519
  • 2
  • 9
  • 19

3 Answers3

2

maybe the API changed,I clear content of mathquill use the code as follow 

//let MQ = MathQuill.getInterface(MathQuill.getInterface.MAX);
MQ.MathField($('.mathquill-editable')).latex("");
shim007
  • 21
  • 4
1

Trying to edit the DOM manually will break things. Use MathQuill's API instead, like so:

$('.mathquill-editable').mathquill('latex', '');

Change $('.mathquill-editable') to a more specific selector unless you want to clear every editable mathquill element on the page.

This will clear the content of textbox, and won't break it's function. However, the textbox will collapse into a tiny 6x6 pixel square, that won't expand to normal size unless the user clicks it. Certainly not dysfunctional, but not the prettiest either.

You can fix this by creating a custom key down event for the space key (source)

var space = $.Event('keydown');

space.bubbles = false;
space.cancelable = false;
space.charCode = 32;
space.keyCode = 32;
space.which = 32;

Note that the event is applied to mathquill's fake textarea on the interior, not the visible element itself.

$('.mathquill-editable').find('textarea').trigger(space);

Again, be sure the selector is specific to the element you wish to clear.

One last issue - the element won't be focused. Not sure if this is an issue for you, but the user will have to reselect the element to continue editing it. To fix that, you must apply the .focus() method:

$('.mathquill-editable').find('textarea').focus();
Community
  • 1
  • 1
hkk
  • 2,069
  • 1
  • 23
  • 48
0

You can put an id to the editable field like this:

<span id="main-input-solution">

After that you can create a function in javascript like this:

function clearContent(){
  var mathFieldSpan1 = document.getElementById('main-input-solution');
  mathFieldSpan1.innerHTML = "";
}

This function you can call e.g on button click event.

sejfi hoxha
  • 1
  • 1