Remove image on click from canvas

Question

OK so ive been playing with this code for a bit, it basicly adds multiple images from DOM to canvas by dragging. But i cant seem to remove the image properly from the canvas on click/ tap event listener.

window.onload = function(){
var stage = new Kinetic.Stage({
    container : "cantainer",
    width : 475,
    height : 150
});
var layer = new Kinetic.Layer();
stage.add(layer);
var con = stage.getContainer();    
var dragSrcEl = null;
//image
document.getElementById("yoda").addEventListener('dragstart',function(e){
       dragSrcEl = this;   

});
document.getElementById("woman").addEventListener('dragstart',function(e){
       dragSrcEl = this;   

});
document.getElementById("nature").addEventListener('dragstart',function(e){
       dragSrcEl = this;   

});
document.getElementById("srce").addEventListener('dragstart',function(e){
       dragSrcEl = this;   

});
document.getElementById("game").addEventListener('dragstart',function(e){
       dragSrcEl = this;   

});
document.getElementById("dog").addEventListener('dragstart',function(e){
       dragSrcEl = this;   

});
document.getElementById("house").addEventListener('dragstart',function(e){
       dragSrcEl = this;   

});





con.addEventListener('dragover',function(e){
    e.preventDefault(); //@important
});
//insert image to stage
con.addEventListener('drop',function(e){
    var image = new Kinetic.Image({
        x: 30,
        y: 20,  
       draggable : true


    });
    layer.add(image);
    imageObj = new Image();
    imageObj.src = dragSrcEl.src;
    imageObj.onload = function(){
        image.setImage(imageObj)
        layer.draw()

    };  

  });
}

Answer 1

You can add a click listener on each of your image objects and remove any image that's clicked.

image.on("click",function(){
    this.remove();  // or this.destroy();
    layer.draw();
});