javascript - 单击添加元素并单击删除相同的元素

Question

我有这段代码可以根据您在 map 图像上单击的位置动态地在 jpg map 上添加标记。它也动态创建 ID。我正在尝试将点击事件附加到每个动态创建的标记，以便如果用户点击该标记，它将被删除。问题是，当他们点击标记时，它会生成另一个标记。我希望用户能够通过单击 map 将标记放置在 map 上，然后如果他们想删除标记，则可以再次单击它而无需在单击要删除的标记时生成新标记。

预先感谢您的所有帮助。

JS :

$(document).ready(function(){
    var clicks = 0;
    $("#container").click(function(e) {
        e.preventDefault();
        var x = e.pageX - 38;
        var y = e.pageY - 60;
        var img = $('<img>');
        img.css('top', y);
        img.css('left', x);
        img.css('width',60);
        img.css('height',60);
        img.attr('src', 'images/location-marker1.png');
        img.attr('id', 'marker' + clicks);
        img.attr('class', 'marker' + clicks);
        img.appendTo('#container');

        $("#container").on("click", "img.marker" + clicks, function(){
            var id = $(this).attr('id');
            alert(id);
            $(this).remove();
        });
        clicks += 1;
    })
});

HTML :

<div id="container">
    <img src="images/floorplan1_fs.jpg">
</div>

Answer 1

实际上，您需要做的就是 (1) 使用一个公共(public)类，比如 marker，来识别插入的标记，以及 (2) 将事件监听器移出外部 单击 函数，让它独立运行:

$("#container").on("click", "img.marker", function(e) {
    $(this).remove();
    e.stopPropagation();
});

这不仅大大简化了您的脚本，因为 #container 现在将监听所有动态添加的 img.marker 元素发出的点击事件，而且使用 e.stopPropagation 阻止点击事件冒泡到父级，这会导致在您单击以删除一个子级时添加一个新的子级。

这是一个概念验证示例，对您的基本代码进行了一些小改动:

1. 不再需要跟踪唯一 ID
2. 在这里，我们利用了 jQuery 赋予的惊人的链接功能

$(document).ready(function() {
  $("#container").click(function(e) {
    
    e.preventDefault();
    
    var x = e.pageX - 38,
        y = e.pageY - 60,
        $img = $('<img>');
    
    $img
      .css({
        top: y,
        left: x,
        width: 60,
        height: 60
      })
      .attr({
        src: 'https://placehold.it/60x60'
      })
      .addClass('marker')
      .appendTo('#container');
  });

  $("#container").on("click", "img.marker", function(e) {
    $(this).remove();
    e.stopPropagation();
  });
});

#container {
  position: relative;
}
#container .marker {
  box-shadow: 0 0 10px 10px rgba(0, 0, 0, .5);
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
  <img src="https://placehold.it/500x500">
</div>