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

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应该出现在这里。bindclick event

.click不适用于动态创建的元素。

因此，您必须使用on()之类的，

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

Answer 2

你所拥有的一切都会起作用，你所要做的就是像这样移动处理程序：

$('#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 3

.on()文档

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

您可以使用

$(buttonId).hide();

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

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