Removing unnecessary math when page is dynamically changed

16 views
Skip to first unread message

Ziophys Krafyty

unread,
Dec 22, 2022, 3:48:54 PM12/22/22
to MathJax Users
Hello,
This is probably a basic question, but I have a page that changes dynamically, and some of the math I display with MathJax needs to disappear at some point. The problem is that the math stays after the update. Is it possible to remove it?
Thanks in advance

Davide Cervone

unread,
Dec 23, 2022, 10:11:00 AM12/23/22
to mathja...@googlegroups.com
I'm afraid I don't understand your description, in particular the does "the math stays after the update" mean?  Can you provide a working page that illustrates the problem you are encountering?

Davide


--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/mathjax-users/186720cc-4a00-4bb3-97c1-6711a31a4250n%40googlegroups.com.

Ziophys Krafyty

unread,
Dec 23, 2022, 11:39:58 AM12/23/22
to MathJax Users
Thank you for your response,

I'm using Yew, which is a Rust web framework, but the project is still pretty young, and there's a bit of WebAssembly glue, so I'm not sure I could provide a simple page that works, is easy to test, etc...
I'll try and explain myself more clearly, and if this doesn't help I'll figure something out.

I have a page, and a bunch of math problems that I want to display, one at a time. So I have a paragraph that initially contains problem 1, and then I have a button that allows me to cycle through the problems. When I press the button, the content of the paragraph is dynamically changed to problem 2, and so on.
My issue is that if problem 1 contains any math that is typeset, and I change to problem 2, I get problem 2 displayed, and I also still have the typeset equation from problem 1.

For example, if problem 1 is "Solve the equation \(x+3=7\)" and problem 2 is "What is a quadratic equation?", what actually gets displayed when I want to show problem 2 is "What is a quadratic equation?x+3=7" (where x+3=7 properly typeset).

Initially, I also had the problem that if problem 2 contained math, it didn't get typeset. I solved this by calling `MathJax.typeset()` every time the content of my component changes, as per the page https://docs.mathjax.org/en/latest/advanced/typeset.html. But this page only deals with typesetting new equations, and not removing the typeset math of equations that aren't wanted anymore.

I guess my question is "Is there a counterpart to `MathJax.typeset()` where I could tell MathJax to remove the typesetting that isn't needed anymore?"

I hope I was clear enough and not too long,
thank you

Davide Cervone

unread,
Dec 24, 2022, 8:50:45 AM12/24/22
to mathja...@googlegroups.com
You don't say how you are clearing out the old question, and that is really where the issue is, as MathJax output is just regular old DOM nodes, and if you remove them, the math will no longer show.  It appears that you are note removing the complete contents of the problem.  Note that if you have added a text node to the page and that text contains mathematics processed by MathJax, then the text node will be modified and additional DOM nodes added to the page.  So if you only remove that original text node, the mathematics will be left in the page.

You may want to create a container node, like a <div> node that contains your problem text, and then remove that <div> when you go to the next problem.  That way, the DOM nodes created by MathJax will be in the <div> as well, and will be removed along with the rest of the problem.

Note, however, that MathJax maintains some internal data about the expressions it typesets, and you will want to remove that data as well when you delete the content that contains that typeset math.  So you would want to use

MathJax.startup.document.clearMathItemsWithin(node)

where "node" is the <div> node above before you remove the <div> from the page.  This sill remove the internal data for any math within that node.

Hope that gets you what you need.

Davide


Reply all
Reply to author
Forward
0 new messages