添加或使用的圖像刪除馬克Jquery的

Question

我有一個HTML DIV如下

<div id="mapimage" style="background-image: url('images/physical-map.jpg'); width: 500; height: 548; background-repeat: no-repeat"></div> 

爲了這個DIV的背景圖像上添加標記，我做如下。

$(document).ready(function() { 
    $('div#mapimage').mousedown(function (e) { 
     e.preventDefault(); 
       var x = e.pageX - this.offsetLeft; 
       var y = e.pageY - this.offsetTop; 
       var img = $('<img>'); 
       img.css('top', y); 
       img.css('left', x); 
       img.attr('src', 'images/red-dot.png'); 
       img.appendTo('#mapimage'); 
    }); 

這是工作的罰款，我需要的是 - 第一次，我會在一個DIV位置（10122）添加標記。如果我在第二次點擊相同的位置，應該從那裏刪除添加的標記。這個怎麼做？

Answer 1

將課程添加到img，並在每次點擊地圖圖像時刪除該課程。

$(document).ready(function() { 
    $('div#mapimage').mousedown(function (e) { 
     e.preventDefault(); 

     // remove all images 
     $('.remove-me').remove(); 

     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 
     var img = $('<img>'); 
     img.css('top', y); 
     img.css('left', x); 
     img.attr('src', 'images/red-dot.png'); 

     // add a class to the image 
     img.addClass('remove-me'); 

     img.appendTo('#mapimage'); 
    }); 
}); 

或者

而不是刪除點擊每次地圖中的所有圖片，只需刪除被點擊的圖像。

$(document).ready(function() { 
    // remove images that are clicked 
    $('.remove-me').on('click', function(){ 
     $(this).remove(); 
    }); 

    $('div#mapimage').mousedown(function (e) { 
     e.preventDefault(); 
     var x = e.pageX - this.offsetLeft; 
     var y = e.pageY - this.offsetTop; 
     var img = $('<img>'); 
     img.css('top', y); 
     img.css('left', x); 
     img.attr('src', 'images/red-dot.png'); 

     // add a class to the image 
     img.addClass('remove-me'); 

     img.appendTo('#mapimage'); 
    }); 
});