How to remove selected image on a div when you click on it?

Question

I am fairly new to Javascript and would like to create a div whereby it allows a person to define points on it by clicking on the area within the div. An image will be added to represent the point clicked. Thereafter, if the person wants to remove this point, upon clicking on the image, it should be remove.

I have done the part whereby it allows a person to define the points based on a minor modification to an existing fiddle: http://jsfiddle.net/uKkRh/1/ Reference: jquery how to add pin to image and save the position to SQL

I also manage to remove all the images by click on the button.

However, I am still short of how to remove the image from the div when the person clicks on the image.

I have tried the following:

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

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

but it works itermitently.

Please see my JSfiddle for my sample. 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

Try this http://jsfiddle.net/uKkRh/635/, but you need a newer verion of jQuery

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