Javascript 如何为动态生成的复选框列表创建撤消按钮

我使用javascript/jquery和html填充页面，当你点击add时，它会添加一个复选框，我只是想知道如何添加一个撤销按钮来删除最后一个复选框

这是我的小提琴

代码段：

     $(document).ready(function() {
$('#btnSave').click(function() {
    addCheckbox($('#txtName').val());
     txtName.value="";
    });
 });

  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);
    $('<br/>').appendTo(container);
    //dino
   }

$（文档）.ready（函数（）{
$（'#btnSave'）。单击（函数（）{
addCheckbox（$（'#txtName'）.val（））；
txtName.value=“”；
});
});
函数addCheckbox（名称）{
变量容器=$（“#cblist”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
$（''，{type:'checkbox'，id:'cb'+id，value:name}）；
$（“”，{'for'：'cb'+id，text:name}）；
$（'
'）。附加到（容器）；
//恐龙
}

添加一个删除按钮，单击该按钮可查询复选框输入并删除最后一个，如下所示

$('#remove').click(function(){
    $('#cblist input').last().remove();
    $('#cblist label').last().remove();
    $('#cblist br').last().remove();
});

HTML

新检查表模板


公司名称：

JS

$（文档）.ready（函数（）{
$（'#btnSave'）。单击（函数（）{
addCheckbox（$（'#txtName'）.val（））；
txtName.value=“”；
});
$（“删除”）。单击（删除复选框）；
});
函数addCheckbox（名称）{
变量容器=$（“#cblist”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
$（''，{type:'checkbox'，id:'cb'+id，value:name}）；
$（“”，{'for'：'cb'+id，text:name}）；
$（'
'）。附加到（容器）；
}
函数removeCheckbox（）{
变量容器=$（“#cblist”）；
container.children（'input'）.last（）.remove（）；
container.children（'label'）.last（）.remove（）；
container.children（'br'）.last（）.remove（）；
}

在将新添加的元素添加到

cblist

之前，您需要将它们包装在一个小容器中，当删除最后一个复选框时，您需要将容器连同标签和换行符元素一起删除：

$（文档）.ready（函数（）{
$（'#btnSave'）。单击（函数（）{
addCheckbox（$（'#txtName'）.val（））；
txtName.value=“”；
});
$（'#btnRemove'）。单击（函数（）{
$（“.New_CB”）.last（）.remove（）；
});
});
函数addCheckbox（名称）{
变量容器=$（“#cblist”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
变量CBContainer=$（“”）；
$('', {
键入：“复选框”，
id:'cb'+id，
值：name
}).附件（集装箱）；
$('', {
‘for’：‘cb’+id，
文本：名称
}).附件（集装箱）；
$（“
”）.appendTo（CBContainer）；
CBContainer.appendTo（容器）；
}

新检查表模板



公司名称：

查找并删除上次添加的复选框

JavaScript:

$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox($('#txtName').val());
         txtName.value="";
    });
    $('#removeCheckbox').click(function(){
    var cb=$( "#cblist input" ).last();
    if(cb && cb.length){
       cb.remove();
    }
});
});
function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

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

}

$（文档）.ready（函数（）{
$（'#btnSave'）。单击（函数（）{
addCheckbox（$（'#txtName'）.val（））；
txtName.value=“”；
});
$（“#删除复选框”）。单击（函数（）{
var cb=$（“#cblist input”）.last（）；
if（cb和cb.长度）{
cb.remove（）；
}
});
});
函数addCheckbox（名称）{
变量容器=$（“#cblist”）；
var inputs=container.find（'input'）；
变量id=输入。长度+1；
checkbox=$（''，{type:'checkbox'，id:'cb'+id，value:name}）；
$（“”，{'for'：'cb'+id，text:name}）；
$（'
'）。附加到（容器）；
}

HTML:

<h1 id="tit">New CheckList Template </h1>
<hr><br>

<form action="page being sent to">
Company Name: <input type="text" name="FirstName" value=""><br><br>




<div id="cblist">

</div>
<br>
<input type="text" id="txtName" />
<input type="button" value="Add Checkbox" id="btnSave" />
<input type="button" value="Remove Checkbox" id="removeCheckbox" />
<br>
<br>
<input type="submit" value="Save Company Template">
<input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>

新检查表模板


公司名称：

---

演示：

这会删除复选框，而不是随之出现的文本

$(document).ready(function() {
    $('#btnSave').click(function() {
        addCheckbox($('#txtName').val());
         txtName.value="";
    });
    $('#removeCheckbox').click(function(){
    var cb=$( "#cblist input" ).last();
    if(cb && cb.length){
       cb.remove();
    }
});
});
function addCheckbox(name) {
   var container = $('#cblist');
   var inputs = container.find('input');
   var id = inputs.length+1;

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

}

<h1 id="tit">New CheckList Template </h1>
<hr><br>

<form action="page being sent to">
Company Name: <input type="text" name="FirstName" value=""><br><br>




<div id="cblist">

</div>
<br>
<input type="text" id="txtName" />
<input type="button" value="Add Checkbox" id="btnSave" />
<input type="button" value="Remove Checkbox" id="removeCheckbox" />
<br>
<br>
<input type="submit" value="Save Company Template">
<input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>