D3 - Removing elements (div) on update

问题

I currently have a chart with 2 viewing options (regular data and percentages). I also have a tooltip that shows the results for each line that I'm showing When I switch options I want my tooltip to keep showing the info (the lines are getting drawn correctly) but instead what I'm seeing is that I'm creating several tooltip boxes for each time I switch options.

My tooltip is an append('g') to my main chart and I'm appending my tooltip box to this tooltip which is appended to my chart which is chartContent

Here's the tooltip box

 const tooltipContainer = d3.select(".stackedChart").append("div")
  .attr("class", css.divBox)
  .style("opacity", 0);

tooltip.append("tooltipContainer")

On update (aka when switching options) I'm already doing this chartContent.remove() chartContent = chart.append('g') (to get the new info)

Now for my .divBox I was trying d3.selectAll(".divBox").remove(); but I can't seem to get it to work. Every time I switch options I get one more .divBoxand I can see the bottom one updating with the info but the one following the tooltip is the top one (I think, I might be wrong).

What are my steps from here? I'm extremely confused

来源：https://stackoverflow.com/questions/62130716/d3-removing-elements-div-on-update