how to clear all note in Stave for render another note

[WingDust]

       var vf = new Vex.Flow.Factory({renderer:{elementId:'vex'}})
        var score = vf.EasyScore()
        var system = vf.System()

const {
  Renderer,
  Stave,
  StaveNote,
  Voice,
  Formatter,
 StaveConnector,
} = Vex.Flow;
const div = document.getElementById('vex');
const renderer = new Renderer(div, Renderer.Backends.SVG);

// Configure the rendering context.
renderer.resize(500, 500);
const context = renderer.getContext();

// Create a stave of width 400 at position 10, 40 on the canvas.
const stave = new Stave(10, 40, 400);

// Add a clef and time signature.
stave.addClef('treble').addTimeSignature('4/4');

// Connect it to the rendering context and draw!
stave.setContext(context).draw();


function refreshRender(noteString){

context.clearRect(0,0,500,500)

console.log(noteString);
// Create the notes
const notes = [
    // A quarter-note C.
    new StaveNote({ keys: [noteString], duration: "q" }),

    // A quarter-note D.
    new StaveNote({ keys: ["d/4"], duration: "q" }),

    // A quarter-note rest. Note that the key (b/4) specifies the vertical
    // position of the rest.
    new StaveNote({ keys: ["b/4"], duration: "qr" }),

    // A C-Major chord.
    new StaveNote({ keys: ["c/4", "e/4", "g/4"], duration: "q" }),
];

const voice = new Voice({ num_beats: 4, beat_value: 4 });

voice.addTickables(notes);

// Format and justify the notes to 400 pixels.
new Formatter().joinVoices([voice]).format([voice], 350);

// Render voice
voice.draw(context, stave);
}

blew code run refreshRender('D/6') and refreshRender('D/4') will have duplicate note

[rvilarl]

I do not know how to do that but I guess that it should be easy to implement in a SVG context. There is a request to reset the complete score #1114 perhaps we could do it in a more granular base. @ronyeh what do you think?

[AaronDavidNewman]

If you are using SVG, you can create an svggroup from the rendering context:

var group = context.getContext().openGroup();

The group is an svgelement and can be remove(). Then you can create a new stave with the original dimensions and draw both notes.

You can't really do much with existing notes on a stave without redrawing it, because all the formatting is already done on the original contents.