Question

我看了很多，发现了很多类似的主题，但是在这个具体情况下，他们都没有真正回答我的问题：

我想在创建动态复选框时想要通过单击垃圾图像删除特定复选框和文本。当我想删除它时似乎无效。

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

Answer 1

添加此

$("#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

Answer 2

尝试以下 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

Answer 3

试试这个

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

Answer 4

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

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

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

动态删除复选框的问题。

4 个答案:

Fiddle

Fiddle