Deleting an Element upon button/icon click

Now to spice things up, we'll be adding a delete button that removes the dropped clone from the canvas.

This is a fairly easy and simple task.

After adding the 'pro' class to a new division and creating the framework for the droppable element, we'll have to append the icon image to the element before it gets appended to th canvas.

This is done by piping the append command to the following line. Or it can also be done in a separate command line.

var newAgent = $('<div>').attr('id', 'pro' + i).addClass('pro');
newAgent.text('Element ' + i).append('<img class="cancel" src="../img/delete.ico" 

width="25px" height="25px" />');

//rest of the code 

Lastly, rather than using a double click to get rid of the clone on the canvas, an event listener is used as follows with pretty much the same internal working to delete the element .

newAgent.on('click', '.cancel', function (e) {

    jsPlumb.detachAllConnections(newAgent.attr('id'));
    jsPlumb.removeAllEndpoints($(this));
    jsPlumb.detach($(this));
    $(newAgent).remove();
});

The delete icon will appear right next to the Element sequencing according to this code. But it can be 

placed wherever you want it to be.