删除附加的文本，点击它

Question

I'm trying to find easiest and cleaner way to append and remove on appended span, div or text. Here is the code. What could be wrong?

/* HTML CODE */
<div id="appendHere" style="padding:10px;border:solid 1px red"></div>

/* Jquery CODE */
$('#appendHere').live('click' , function() {
    $('#appendHere').append('<span style="padding:10px;border:solid 1px green;">Simple text</span>');
});

$('#appendHere span').live('click' , function() {
    $(this).remove();
});

Answer 1

DEMO

you can try to use .toggle()

Example :

$('#appendHere').on('click' , function(e) {
 $('#appendHere span').toggle();
});

Answer 2

depending on which jQuery version you are using. Your use of .live() might be your first issue. try instead .on() example:

$(document).on('click', '#appendHere span', function(){$(this).remove();});

You could also just try something like

<style>
#addHere{padding:10px;border:solid 1px red;}
#addHere span{padding:10px;border:solid 1px green;}
</style>

<div id="appendHere" data-has_span="false"></div>
$(document).on('click', '#appendHere', function()
{
    $elem = $(this);
    if($elem.data('has_span') == "false")
    {
        $elem.prop('data-has_span', 'true').append('<span>Text here</span>');
    }
    else
    {
        $elem.prop('data-has_span', 'false').find('span').remove();
    }
});

Answer 3

You'd better not use live , try instead .bind() or .on()

The question is when you click span , div is clicked and time

so you can try to do it like this:

$("appendHere").on("click", function(e) {
    if(!$(this).is($(e.target))) {
        return false;
    }
    $("<span>Text here</span>").appendTo($(this)).on("click", function() {
         $(this).remove();
    });
});