• HTML
• CSS
• JS

HTML

<h1>Clóname</h1>

<!--
    Para que funcione correctamente se recomienda 
    hacer CLICK para clonar y DOBLE CLICK para 
    elimnar o remover.
-->

<div class="caja-bol">
    <div class="bol-pequeno"></div>
    <div class="bol-mediano"></div>
    <div class="bol-grande"></div>
</div>

CSS

.caja-bol div{
    cursor:pointer;
    display:inline-block;
}
.bol-grande{
    width:200px;
    height:200px;
    background:red;
    border-radius:50%;
}
.bol-mediano{
    width:100px;
    height:100px;
    background:blue;
    border-radius:50%;
}
.bol-pequeno{
    width:50px;
    height:50px;
    background:green;
    border-radius:50%;
}

JS

var sto  = 0;
var bool = false;

function clonar(obj){
    var clonar = obj.clone(); //clonar
                 obj.before(clonar); //mostrar
}

$(function(){
    
    $(document).on("click",".caja-bol div",function(){
        
        var obj   = $(this);
        
        sto = setTimeout(function() {
        
            if (!bool) {
                clonar(obj);
            }
            bool = false;
            
        },200);
      })
      .on("dblclick",".caja-bol div",function(){
          
        clearTimeout(sto);
        
        bool = true;
        
        $(this).remove();
        
      });

});