jquery - 删除当前元素 jquery 手风琴

Question

我有“dinamic”手风琴。单击“addBtn”创建新元素。每个元素都有删除当前元素的“删除”按钮。

HTML

<div id="accordion">

                        <div id="aE">
                            <div id="aT" class="aT_val"> 
                                <h3></h3>
                            </div>

                            <div id="aC" class="aC_val">
                                <p></p>
                            </div>

                            <div id="deleteBtn" class="deleteBtn"><img src="images/del.png"></div>

                        </div>

                    </div>

JS

$('#addBtn').click(function() {
        count++;

        $('#accordion').append('<div id="aE' + count + '"><div id="aT' + count + '" class="aT_val"><h3></h3></div><div id="aC' + count + '" class="aC_val"><p></p></div><div id="deleteBtn' + count + '" class="deleteBtn"><img src="images/delete-button.png"></div></div>'); });

$('#deleteBtn' + count).click(function() {
        $('#aE' + count).remove();
    });

但是“deleteBtn”不会删除元素“aE”。如何解决？

Answer 1

'#aE' + count正在单击时进行评估，而不是在创建函数时进行评估，因此它将是最后使用的值，count而不是创建按钮时的值。

Answer 2

#deleteBtn 的 onclick 回调正在与父范围的不同上下文中进行评估。

$('#deleteBtn' + count).click(function() {
    // this will always return a fixed number
    $('#aE' + count).remove();
});

尝试这个

$('#deleteBtn' + count).click(function() {
    // this will return a correct id
    var cnt =  this.id.replace('deleteBtn', '');
    $('#aE' + cnt ).remove();
});