javascript - 动态删除复选框的问题。

Question

我找遍了很多地方，发现了很多类似的话题，但没有一个能真正回答我在这种特定情况下的问题:

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

Live Demo

HTML:

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

J查询:

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

试试下面的 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