Javascript 单击时添加元素，单击时删除相同的元素

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

提前感谢您的帮助

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;
    })
});

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

$（文档）.ready（函数（）{
var=0；
$（“#容器”）。单击（函数（e）{
e、 预防默认值（）；
var x=e.pageX-38；
var y=e.pageY-60；
变量img=$（'
HTML:

$(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;
    })
});

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

只需使用常规类来附加事件，并将其放置在其他单击事件之外：

$(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');
        img.appendTo('#container');

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

实际上，您需要做的只是（1）使用一个公共类，例如
marker
，来识别插入的标记，以及（2）将事件侦听器移出外部的
单击
函数，并让它自己站在右边：

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

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

下面是一个概念验证示例，对基本代码进行了一些小的更改：

不再需要跟踪唯一ID
在这里，我们利用jQuery提供的惊人链接功能

$（文档）.ready（函数（）{
$（“#容器”）。单击（函数（e）{
e、 预防默认值（）；
var x=e.pageX-38，
y=e.pageY-60，
$img=$（'
#容器{
位置：相对位置；
}
#容器，标记器{
盒影：0 0 10px 10px rgba（0,0,0,5）；
位置：绝对位置；
}

ooh，将事件处理程序嵌套在另一个处理程序中通常是个坏主意。是否希望使用jquery，这样会更容易您的单击事件将从
img
传播到容器中。尝试将事件参数添加到
img
click处理程序并调用
event.stopPropagation（）
…很抱歉，直到今天早上我才有机会看这个。谢谢Terry，我对Javascript有点初学者。是的，我也知道一点JQuery。我会试试你的建议George