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

我想删除动态生成的“ .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.行是基于static one和jQuery append（）生成的。

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

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

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

最佳答案

使用委托事件。

Direct and delegated events


  事件处理程序仅绑定到当前选定的元素；它们必须在您的代码调用.on（）时存在。为确保元素存在并可以选择，请将脚本放在HTML标记中的元素之后，或在文档就绪处理程序内执行事件绑定。或者，使用委托事件来附加事件处理程序。


只需更改点击处理程序即可

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

关于javascript - 使用jQuery删除动态生成的HTML，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/32537769/