Question

我想删除动态生成的＆＃39; .row＆＃39;但它只适用于静态的。第二行是动态生成的。

我想提供图片但我没有足够的声誉。这是我的代码片段：
1.静态＆＃39; .row＆＃39;

        <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。删除＆＃39; .row＆＃39;的代码。适用于静态行，但它不能删除动态生成的行。

$('.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中相同。

我认为动态生成的内容需要某种＆＃39;绑定＆＃39;但我不知道如何实现这一目标。有什么建议吗？

Answer 1

使用委派活动。

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

使用jQuery删除动态生成的html

1 个答案: