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