'Selecting' an image inside an editable div

Question

working on a basic text editor using a contenteditable div.

Any solution to making an image selectable and then deleteable. So instead of backspacing on the keyboard, the user can click on the image it becomes 'highlighted' and then pushing delete with only delete that image.

JSFiddle for testing: http://jsfiddle.net/vbbay6jc/

code for backup:

<div contentEditable="true">
  <img class="temp-image" src="https://encrypted-tbn2.gstatic.com/images?q=tbn:ANd9GcQLl0EqJ_0sAhvsYTsLJaazja4H3ol3dgBYd3OAfEqCWYR2EyRWH2CXxEM"/>
</div>

Answer 1

Well i made a very simple example, first select the image and then press del. Hope it helps. http://jsfiddle.net/vbbay6jc/2/

var seleccionado;
$(".temp-image").on('click', function(){
    seleccionado = this;    
});

$('#newupdate-text-1').keyup(function(e){
    if(e.keyCode == 46){
        $(seleccionado).remove();
    }
})

You could add a class to see what is selected in the screen.