Javascript 附加 + 单击删除它们

Question

我有一个问题，我已经解决了，但这太烦人了。

我有一个 js 代码，当使用“追加”按钮按下按钮时，它会放下一些 html 代码，并使用该代码为 x 按钮提供一个 id，并为容器元素提供一个 id。 我想使用这些 id-s 通过单击功能来识别它们，以删除 html 代码：

var num = 0;
$('.button').click(funcion(){
    num++;
    var code = '\
    <div class="container" id="text' + num + '">\
        <div id="x' + num + '">\
           x\
        </div>\ 
        Some stuff\
    </div>\
    ';

    $('.puthere').append(code);

    $('#x' + num).click(function(){
        $('#text' + num).remove();
    });
});

现在烦人的部分是 x 上的点击功能。 我期望的是，这段代码会像这样工作：第一次点击“按钮”类元素应该给出这个代码：

$('#x1').click(function(){
    $('#text1').remove();
});

第二次点击后，我应该有这个：

$('#x1').click(function(){
    $('#text1').remove();
});

$('#x2').click(function(){
    $('#text2').remove();
});

相反，我在第二次点击后得到的是：

$('#x1').click(function(){
    $('#text2').remove();
});

$('#x2').click(function(){
    $('#text2').remove();
});

所以它总是 x 按钮想要删除的最后一个元素。 我的问题是，为什么我的“num”变量可以在 #x1 处保持为“1”，而在 #text1 处则不然？

我的解决方案是解决父元素：

$('#x' + num).click(function(){
    $(this).parent('.container').remove();
});

我知道，也有“实时”功能，我可以使用什么，而且我不需要弄乱 id-s，但这似乎更重。 那是对的吗？ 或者我把事情过于复杂而没有提高效率？

Answer 1

这是因为 num 是全局的，您可以在创建第二个按钮后访问它。 要解决此问题，您可以使用匿名自执行函数包装您的代码：

(function(num) {
    $('#x' + num).click(function(){
        $('#text' + num).remove();
    });
})(num);

或者更好地只使用一键

$('.parent').on('click', '.container > div', function() {
    $(this).parent().remove();
});