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

Question

我有这段代码可以根据您在地图图像上单击的位置动态地在 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;
    })
});

HTML :

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

Answer 1

只需使用一般 class 附加事件并将其放在其他点击事件之外：

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

注意： 如果您想改进代码，您可以使用：

$('<img />', {  
    'class' : "marker",
    src     : 'images/location-marker1.png',
    css     : {
        top    : y,  
        left   : x, 
        width  : 60, 
        height : 60, 
    },
    on : {
        click: function() {
             $(this).remove();
        }
    }
}).appendTo('#container');

希望这对您有所帮助。

$(document).ready(function(){
  $("#container").click(function(e) {
    e.preventDefault();

    $('<img />', {  
      'class' : 'marker',
      src     : 'https://www.gobages.com/wp-content/uploads/2015/09/marker-reservoirs.png',
      css     : {
        top    : e.pageY - 37,  
        left   : e.pageX - 24, 
        width  : 30, 
        height : 30, 
      },
      on : {
        click: function(e) {
          e.stopPropagation();
          $(this).remove();
        }
      }
    }).appendTo('#container');
  });
});

#container {
  position: relative;
}
#container .marker {
  position: absolute;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container">
    <img src="http://geology.com/world/world-map-clickable.gif">
</div>

Answer 2

实际上，您需要做的就是 (1) 使用通用的 class，比如 marker，来识别插入的标记，以及 (2) 将事件侦听器移出外部click 函数，让它独立存在：

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

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

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

不再需要跟踪唯一 ID
在这里，我们利用 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>

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

Add element on click and delete same element on click

html

javascript

css

jquery

dynamically-generated