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 处不能保持“1”？

我的解决方案是改为处理父元素:

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