Question

我成功创建了一个html链接，点击该链接会显示一条消息和按钮。

然后，当用户点击它时，我希望附加的按钮（和消息）消失。它不起作用，我想知道你是否可以帮助我：

$(document).ready(function() {

    $('#link').click(function() {
        $(this).remove();
            $('.div').append('<h2>Click to remove the button</h2>') .css({'background-color':'#fff'});     
                 $('.div').append('<button>Click me</button>');  
    });

    $('button').click(function() {
        $(this).remove();
    });

});

Answer 1

当dynamically button bind时，click event创建的.click应该存在。

$(document).on('click','button',function() { $(this).remove(); });不适用于动态创建的元素。

所以，你必须使用on()之类的，

{{1}}

Answer 2

.on()文档

$(document).on('click','button',function() {
    $(this).remove();
});

你可以使用

$(buttonId).hide();

您hide按钮，当您需要时，可以再次显示$(buttonId).show();

Answer 3

你所拥有的是什么，你所要做的就是像这样移动处理程序：

$('#link').click(function() {
    $(this).remove();
    $('div').append('<h2>Click to remove the button</h2>') .css({'background-color':'#fff'});     
    $('div').append('<button>Click me</button>');  

    // here you go ...
    $('button').click(function() {
        $(this).remove();
    });
});

这是一个小提示：http://jsfiddle.net/MCTNv/

问题是当您绑定案例中的单击事件$('button').click时，按钮元素尚不存在，只有在您单击#link后才会创建它。

Answer 4

另一种方法也可行：

$('#link').click(function() {
    $(this).remove();
    $('.div')
        .append('<h2>Click to remove the button</h2>')
        .css({'background-color':'#fff'});
    $('<button />', {
        text : 'Click me',
        click : function(){
            $(this).remove();
        }
    }).appendTo('.div');
});

你如何追加一个按钮，然后告诉该按钮删除一个html元素？

4 个答案: