动态删除复选框的问题。答案

【问题标题】：Problems with remove checkbox dynamically.动态删除复选框的问题。
【发布时间】：2014-04-08 20:34:39
【问题描述】：

我翻遍了，发现很多类似的话题，但没有一个能真正回答我这个具体情况的问题：

当我创建一个动态复选框时，我想通过单击垃圾图像来删除特定的复选框和文本。当我想删除时，它似乎不起作用。

HTML：

<input type="text" id="checkBoxName" />
<input type="button" value="ok" id="btnSaveCheckBox" />

jquery：

$(document).ready(function() {
    $('#btnSaveCheckBox').click(function() {
        addCheckbox($('#checkBoxName').val());
        $('#checkBoxName').val("");
    });

});

    function addCheckbox(name) {
       var container = $('#cblist');
       var inputs = container.find('input');
       var id = inputs.length+1;

       $('<input />', { type: 'checkbox', id: 'cb'+id, value: name }).appendTo(container);
       $('<label />', { 'for': 'cb'+id, text: name }).appendTo(container);

       $('<img />', { "src": "/Pages/Images/trashDialog.png", "class": "removeCheckBoxDialog"}).appendTo(container);

            $('.removeCheckBoxDialog').on('click', function (e) {

                $("#cb :checkbox").remove();

            }); 


       $('<br/>').appendTo(container);
    }

CSS：

.removeCheckBoxDialog {
    margin-left:10%;
    cursor:pointer;
}

【问题讨论】：

标签： javascript jquery html css checkbox

【解决方案1】：

试试下面的jQuery：

$('#cblist').on('click','.removeCheckBoxDialog', function (e) {            
    $('#'+$(this).prev().attr('for')).remove();
    $(this).next('br').remove().prev().addBack().remove();
    $(this).remove();
});

Fiddle

上面没有清除标签，所以我稍微编辑了一下：

$('#cblist').on('click','.removeCheckBoxDialog', function (e) {            
    $('#'+$(this).prev().attr('for')).remove();
    $(this).next('br').remove();
    $(this).prev().remove();
    $(this).remove();
});

Fiddle

【讨论】：

能否请教一下，这段代码是如何工作的：$('#'+$(this).prev().attr('for')).remove(); $(this).next('br').remove().prev().addBack().remove();
@AdiT 检查第二个小提琴。实际上我发现第一个小提琴没有清除标签
在$('#'+$(this).prev().attr('for')).remove(); 里面得到for=""里面的值，其实就是前一个input:checkbox的id。因此，如果 for = "cb1" 它会删除带有 id cb1*(#cb1)* 的复选框
如果我们向静态元素添加点击事件，则使用.click()。但我们向动态元素添加点击事件，则使用.on。在$('#cblist').on('click','.removeCheckBoxDialog', function (e) { ... }); 中，它的意思是添加对具有 id=cblist 的容器内具有 class=removeCheckBoxDialog 的元素的点击事件。包含 class=removeCheckBoxDialog 的元素可能已经存在或被动态添加
谢谢你帮助我:)

【解决方案2】：

添加这个

$("#cb"+id).remove();
    $('label[for=cb'+id+']').hide();
    $(this).nextAll('br').remove();
    $(this).remove();

到您的click 函数

$('.removeCheckBoxDialog').on('click', function (e) {

            $("#cb"+id).remove();
            $('label[for=cb'+id+']').remove();
            $(this).nextAll('br').remove();
            $(this).remove();

        });

DEMO

【讨论】：

<br/> 也应该被删除。
将整行放在容器内总是更好。就像一个 div 元素可以消除对 br 的需求。将单行的所有组件放在一个 div 中也使删除函数像 $(this).parent().remove(); 一样简单
@NevilleNazerane 这是另一种方式，但我认为我的回答不值得你投反对票
问题是添加了 br，然后包括 br 在内的多个元素被一一删除。每个都以不同的方式选择，有些有附加。另一方面，只需将组件添加到 div 中即可使函数更快，因为只需使用简单的选择器 $(this).parent 删除一个元素。

【解决方案3】：

试试这个

 $("#cb"+id).remove();
 $('label[for=cb'+id+']').remove();

【讨论】：

【解决方案4】：

试试this。我做了以下事情：

附加一个 div 以包含 3 个组件中的每一个
我使用var container2 = $("div:last-of-type", container); 选择了这个div。
最后我只是简单地使用$(this).parent().remove(); 来获取父级并将其删除。

我还删除了<br>，因为 div 默认执行换行的工作。

【讨论】：