Failed to execute 'querySelectorAll' on 'Element': '#celestial*' is not a valid selector.

[fmilioni]

If you call the display function twice, the following error occurs: Failed to execute 'querySelectorAll' on 'Element': '#celestial*' is not a valid selector.

The problem started after this commit: https://github.com/ofrohn/d3-celestial/commit/9bae16e3c0718e3aa0778f623df9fdb4b8d8c25e. It's looks like the selector is invalid at this line:

if (container) container.selectAll(parentElement + "*").remove();

(if you do a basic test with document.querySelectAll('#celestial*'), the same problem will occur.)

---

I did a temporary fix in my code using this snippet:

[ofrohn]

Yeah, there was a space missing. Should be fixed now

[fmilioni]

@ofrohn Looks like it's not working properly yet. It does fix the selector but not everything is being deleted from the DOM. I'm using version 0.7.34.

My temp workaround

useLayoutEffect(() => {
    //  FIXME  remove celestial-form
    const form = document.getElementById('celestial-form');
    if (form) form.remove();

    celestial.display(cfg);
  }, [options]);

I'll release d3-celestial as a react component soon, i'm very excited =)