Question

我对Javascript很新，并且想创建一个div，它允许一个人通过点击div中的区域来定义它上面的点。将添加图像以表示单击的点。此后，如果此人想要删除此点，则在点击图像时，应将其删除。

我已经完成了这个部分，它允许一个人根据对现有小提琴的微小修改来定义点：http://jsfiddle.net/uKkRh/1/ 参考：jquery how to add pin to image and save the position to SQL

我还设法通过点击按钮删除所有图像。

但是，当用户点击图片时，我仍然缺乏如何从div中删除图像。

我尝试了以下内容：

$('#container >img').click(function() {

   var selectedImg = $(this);
   selectedImg.remove();
   return;
 });

但是它非常有效。

请参阅我的JSfiddle获取我的样本。 http://jsfiddle.net/WindSaviour/rUNsJ/19/

var point = [];
var id = 0;
$(document).ready(function() {
    var output = $('#container');



    $("#container").click(function(e) {
        e.preventDefault();
        var isPointPresent = false;
        var x = e.pageX - this.offsetLeft;
        var y = e.pageY - this.offsetTop;
        console.log("Mouse Click Pos (x=" + x + ", y=" + y + ")");

        for(var i=0; i< point.length; i++)  {

            if(x >= point[i].min_x && x<=point[i].max_x) {
                if(y >= point[i].min_y && y<=point[i].max_y) {
                    isPointPresent = true;
                    point.splice(i,1);
                    break;
                }
            }
        }
        point[point.length] = { "x-pos":  x, "y-pos":y, "min_x": x-25, "max_x": x+25, "min_y": y-83, "max_y": y};

        if(isPointPresent) {
            $('#container >img').click(function() {

                var selectedImg = $(this);
                selectedImg.remove();
                return;
            });
        }


        var img = $('<img>');
        var left = x-25;
        var top = y-83;
        console.log("Img Start Pos (x=" + left + ", y=" + top + ")");
        img.css('top', top);
        img.css('left', left);
        img.attr('src', 'http://www.clker.com/cliparts/P/w/G/0/N/o/google-map-th.png');

        img.attr('id', id);
        img.appendTo('#container');
        /*
        */
        id++;
    })



});

$('#remove').click(function() {
   $('#container > img').remove();
});

Answer 1

试试这个http://jsfiddle.net/uKkRh/635/，但你需要更新版本的jQuery

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

如何在单击它时删除div上的所选图像？

1 个答案: