javascript - 使用 jQuery 删除动态生成的 html

Question

我想删除动态生成的“.row”，但它只能用于静态生成的。第二行是动态生成的。

我想提供图片，但我没有足够的声誉。以下是我的代码片段:
1.静态'.row'

        <div class="col-sm-4" style="padding-left: 0;">
            <select>
                <option value="">Skill Level</option>
                <option value="">1</option>
                <option value="">2</option>
                <option value="">3</option>
            </select>
        </div>
        <div class="col-sm-2" style="padding-left: 0;">
            <div class="delete-myskill-candidate progress-bar-candidate toggle">
                <a class="progress-bar-candidate-toggle">-</a>
            </div>
        </div>
    </div>
</div>

2。删除“.row”的代码。适用于静态行，但不能删除动态生成的行。

$('.delete-myskill-candidate').on('click', function (events) {     
    $(this).closest(".row").remove();  
});

3。行是基于静态行和 jQuery append() 生成的。

$("#mySkills").append(firstDiv.append(selectList).append(deleteButton));

firstDiv、selectList 和 deleteButton 与 HTML 中的相同。

我认为动态生成的内容需要某种“绑定(bind)”，但我不知道如何实现。有什么建议吗？

Answer 1

使用委托(delegate)事件。

Direct and delegated events

Event handlers are bound only to the currently selected elements; they must exist at the time your code makes the call to .on(). To ensure the elements are present and can be selected, place scripts after the elements in the HTML markup or perform event binding inside a document ready handler. Alternatively, use delegated events to attach event handlers.

只需从

更改点击处理程序

$('.delete-myskill-candidate').on('click', function (events) {     
    $(this).closest(".row").remove();  
});

到

$('selector of upper most parent').on('click', '.delete-myskill-candidate', function (events) {     
    $(this).closest(".row").remove();  
});