Learn D3.js

Exiting unused elements

Remember that, when there are more elements than needed, these are moved to the _exit array. You can obtain a selection of these elements by calling exit() and then call remove() on that selection. For this, you just need to add one extra line to the redraw() function:

function redraw() {    const selection = d3.select("#container") // joins data                        .selectAll(".letter")                        .data(datasets[idx].split(""));     selection.exit().remove(); // removes extra elements     selection.enter().append("div") // adds elements      .merge(selection)             // merges selections      .attr("class", "letter")      // updates merged selection      .style("background-color", d => colors[idx])      .text(d => d);}

Now, you can click all four buttons, and the data will be displayed ...