javascript - 如何为动态制作的复选框列表制作撤消按钮

Question

我使用 javascript/jquery 和 html 填充页面，当您点击添加时它会添加一个复选框，我只是想知道一种添加撤消按钮以删除最后一个复选框的方法。

这是我所拥有的 js fiddle

My code JSFIDDLE

代码片段:

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

Answer 1

https://jsfiddle.net/kf2mq20e/1/

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="btnRemove" />
<br>
<br>
<input type="submit" value="Save Company Template">
<input TYPE="button" onClick="history.go(0)" VALUE="Restart Template">
</form>

JS

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

    });

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

    }

    function removeCheckbox(){
        var container = $('#cblist');
        container.children('input').last().remove();
        container.children('label').last().remove();
        container.children('br').last().remove();
    }