Нажмите и отпустите кнопку jQuery

Question

Когда вы нажмете div class="in", я хочу добавить span внутри div class="in" и добавить background-color.

Когда я нажимаю на элемент, который находится за пределами div class = "in" Я хочу удалить добавленные span и css.

Как это сделать?

Answer 1

Что об этом один:

$(".in").click(function(event){ 
    event.stopPropagation(); 
    var span = $("<span>My new span</span>").css('background-color', 'yellow'); 
    $(this).append(span); 
}); 
$(".outer").click(function(event){ 
    $(this).find('.in span').remove(); 
}); 

Посмотрите на пример http://jsfiddle.net/vA2FP/1/

Answer 2

Вы можете попробовать, как это с меньшим количеством строк кода:

Кликнув на DIV с классом .in

$(".in").on('click',function(e){ 
    e.stopPropagation(); 
    $('<span/>').appendTo($(this)).text("new Added").css({'background-color':'Red'}); 
}); 

Щелчок из стороны в Div:

$(document).on('click',function(){ 
    $(".in").find('span').remove(); 
}); 

JSFiddle Demo