点击事件下替换Div内Bokeh对象而非追加的实现求助

嘿，这个问题其实挺常见的，核心就是要明确告诉Bokeh该把新图表渲染到哪里，并且在渲染前清空旧内容。我给你一步步调整代码：

首先，先确保你的页面上有一个专门用来承载Bokeh图表的Div容器，给它一个唯一ID，方便我们精准定位：

<!-- 放在你想要显示图表的位置 -->
<div id="bokeh-chart-container"></div>

然后修改你的JavaScript代码，关键点有两个：

1. 每次加载新图表前，清空这个容器的内容
2. 调用embed_item时，明确指定把图表渲染到这个容器里

修改后的代码如下：

rows.forEach(row => {
  row.addEventListener("click", () => {
    var pic = <<my_url>> + ($(row).attr("data-href"));
    // 1. 获取目标容器，并清空原有内容
    const chartContainer = document.getElementById('bokeh-chart-container');
    chartContainer.innerHTML = '';

    $.ajax({
      data : {},
      dataType: "json",
      type : 'GET',
      url : <<my flask app path>>
    })
    .then(function(response) {return response;})
    .then(function(item) {
      // 2. 嵌入图表时指定目标容器，强制替换原有内容
      Bokeh.embed.embed_item(item, chartContainer);
    });
  });
});

为什么原来的代码会追加？ #

默认情况下，如果调用Bokeh.embed.embed_item(item)不指定第二个参数，Bokeh会把新图表追加到页面的<body>标签末尾，或者在之前的默认容器里继续叠加。通过指定目标容器并提前清空，就能强制替换掉旧内容了。

如果你习惯用jQuery，也可以把清空容器的代码换成：

$('#bokeh-chart-container').html('');

如果遇到极端情况（比如旧图表的事件监听残留），可以额外保存之前的Bokeh文档实例并调用doc.destroy()销毁，但一般来说上面的方法就足够解决你的问题啦。

内容的提问来源于stack exchange，提问作者GMT