热点Javascript onclick函数可完成2个不同的任务

Question

我想根据mouseclick事件来动态创建热点，如果

1）按一次：绘制热点（在热点上附加一个加号按钮），然后单击按钮将弹出模式对话框，以放置与该特定点相关的用户注释。

2）再次按：删除点。

我能够完成上述两个任务，但是当我关闭弹出模式对话框时，热点指针也消失了。

我相信这是因为append方法。

function draw() {
  dots.innerHTML = '';
  history[historyIndex].forEach(function(dot) {
    var elem = dots.appendChild(document.createElement('div'));
    elem.className = 'dot';
    elem.style.left = dot.get('x') + 'px';
    elem.style.top = dot.get('y') + 'px';

    var btnPlus = document.createElement('button')
    btnPlus.className='btn btn-default btn-circle';
    btnPlus.setAttribute("id", "btnPlus");
    var icon = document.createElement('i');
    icon.className='glyphicon glyphicon-plus';
    btnPlus.append(icon);
    elem.append(btnPlus);
    console.log(btnPlus);
   /* var modal = elem.appendChild(document.createElement('div'));
    modal.setAttribute("id", "myModal");
    modal.setAttribute("class", "modal");
    var modalContent = document.createElement('div');
    modalContent.setAttribute("class", "modal-content");
    var content = modal.appendChild(modalContent);
*/    // clicking on a dot removes it.
    elem.addEventListener('click', function(e) {
      removeDot(dot.get('id'));
      e.stopPropagation();

    });
    btnPlus.addEventListener('click', function(e) {
        myFunction();
});


  });
  undo.disabled = (historyIndex != 0) ? '' : 'disabled';
  redo.disabled = (historyIndex !== history.length - 1) ? '' : 'disabled';
}