删除附加的文本点击它Jquery答案

【问题标题】：Remove appended text clicking on it Jquery删除附加的文本点击它Jquery
【发布时间】：2014-10-07 13:16:13
【问题描述】：

我正在尝试找到最简单、更简洁的方法来附加和删除附加的跨度、div 或文本。这是代码。有什么问题？

/* 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();
});

【问题讨论】：

您使用的是哪个版本的 jquery？您想实际删除跨度或显示/隐藏就足够了吗？

标签： javascript jquery html css append

【解决方案1】：

DEMO

你可以尝试使用.toggle()

例子：

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

【讨论】：

【解决方案2】：

取决于您使用的 jQuery 版本。您对.live() 的使用可能是您的第一个问题。试试 .on() 例子：

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

你也可以试试

<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();
    }
});

【讨论】：

我指定使用#appendHere 只是因为您可能面临事件冒泡的情况。这意味着尽管单击了跨度，但实际上您可能仍然或至少浏览器将其视为这样。正在点击父 div

【解决方案3】：

你最好不要使用live，改用.bind()或.on()

问题是当你点击span，div被点击，time

所以你可以尝试这样做：

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

【讨论】：