js 移除body中已插入的div

js yekong

threejs 地图项目中,需要插入弹窗div,因为地图需要下钻所以会多次初始化,但是每次初始化后div中都会重复插入div,为了避免重复插入,需要在插入前判断是否存在,如果存在则移除再重现插入。

为了确保每次初始化时都只有一个tooltip元素,你可以首先检查document.body中是否已经存在一个tooltip元素,如果存在则销毁它。然后再进行初始化。以下是如何实现这一逻辑的代码:

const getPop = () => {
    // 查找已存在的tooltip元素
    let existingTooltip = document.querySelector('.my-tooltip');

    // 如果存在,则销毁它
    if (existingTooltip) {
        document.body.removeChild(existingTooltip);
    }

    // 创建新的tooltip元素
    tooltip = document.createElement('div');
    tooltip.className = 'my-tooltip';  // 添加一个class以便稍后查找它

    // ... 其他tooltip属性和样式设置 ...

    document.body.appendChild(tooltip);  // 将tooltip添加到body

    // ... 其他的代码 ...
}

注意,为了能够准确地查找到tooltip元素,我给它添加了一个class属性(名为my-tooltip)。你可以根据需要更改这个名称。

通过上述代码,你可以确保每次初始化时,tooltip元素都是新的,并且之前的tooltip(如果存在)已经被销毁。

喜欢