如何为点击canvas生成的局部变量div标记实现正常可复用的删除功能

你使用全局变量window.divMark存储标记元素，每次生成新标记时都会覆盖这个变量的指向，仅保留最后生成的标记元素的引用。第一次点击删除按钮后，这个引用对应的元素已经被移除，后续点击删除按钮时操作的是已经不存在的DOM元素，自然不会生效。

另外你原有代码中还有一处笔误：判断水平方向溢出时，你写的是yMax - imgWidth，应该替换为xMax - imgWidth，否则宽度溢出时的定位逻辑会出错。

根据你常见的删除需求，对应调整如下：

场景1：每次点击删除按钮，移除最后添加的一个标记 #

用数组存储所有生成的标记元素，替代全局单变量存储，删除时从数组末尾取出元素执行移除操作即可，完整修改代码如下：

$(function () {
  // 新增数组存储所有标记元素
  const markList = []
  $("#the-canvas").click(function (e) {
    x = e.pageX;
    y = e.pageY;
    var xMax = 2900;
    var yMax = 2900;
    var img = $('<img class="comment" src="indeksiraj-1.png" alt="myimage" />');

    // 改为局部变量，不要挂载到window
    const divMark = document.createElement("div");
    divMark.classList = `markers mark`;

    $(divMark).css({
        position: "absolute",
        left: x + "px",
        top: y + "px",
    });

    $(divMark).append(img);
    $(marksCanvas).append(divMark);
    // 新生成的标记存入数组
    markList.push(divMark)

    counter++;

    saveLocalPos(x);
    saveLocalY(y);

    var imgHeight = img.outerHeight();
    if (y + imgHeight > yMax) {
        $(divMark).css("top", yMax - imgHeight);
    }

    var imgWidth = img.outerWidth();
    if (x + imgWidth > xMax) {
        $(divMark).css("left", xMax - imgWidth);
    }
  });

  // 删除逻辑修改
  deleteBtn.onclick = function (e) {
    // 数组不为空时才执行删除
    if(markList.length){
      const lastMark = markList.pop()
      lastMark.remove()
    }
  };
})

场景2：每次点击删除按钮，清空所有已生成的标记 #

直接通过类名选中所有标记元素移除即可，代码如下：

deleteBtn.onclick = function (e) {
  $('.markers.mark').remove()
  // 如果使用了markList存储数组，同时清空数组
  markList.length = 0
};

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