两种不同的新增选项交互方式（以及对应实现方式）

一、录入完成，再点新增，不可修改
使用场景：费用记录

ps:此图用faststone进行录屏，在https://cloudconvert.com/wmv-to-gif上将录好文件wmv格式在线转为gif

（1）、提供一个统一输入口，比如某几个输入框
（2）、编写显示的位置，简单代码如下：

<div>
        <ul id="list" class="list"></ul><button class="sureBtn" type="button" id="sureBtn" onclick="addTransaction();">确定添加</button>
</div>

（3）、编写添加按钮的js，代码如下：

let transactions = new Array();
let list = document.getElementById('list');
Array.prototype.myfilter = function(fun /*, thisp*/){
        var len = this.length;
        if (typeof fun != "function"){
            throw new TypeError();
        }
        var res = new Array();
        var thisp = arguments[1];
        for (var i = 0; i < len; i++){
            if (i in this){
                var val = this[i]; // in case fun mutates this
                if (fun.call(thisp, val, i, this)) {
                    res.push(val);
                }
            }
        }
        return res;
    };
function getRandomId(){
        return Math.floor(Math.random() * 100000000);
}
function addTransaction(){
	//根据自己的业务场景设置对象对应的属性值，这里随便set值，id是记录每条数据的唯一标识，删除方法要用到
    let transaction = {
        id:getRandomId(),
        text:"324",
        amount:"3333"
    }
    transactions.push(transaction);
    addTransactionDOM(transaction);
}
function addTransactionDOM(transaction){
        var item = document.createElement('li');
        //添加类名
        // item.classList.add('plus');
        // 设置内容
        item.innerHTML = '您赚到了'+transaction.id+'<button type="button" class="delete-btn" οnclick="removeTransaction('+transaction.id+')">&times;</button>';
        list.appendChild(item);
    }

    function removeTransaction(id){
        // transactions = transactions.filter(_ => _.id !== id);ie不兼容
        transactions = transactions.myfilter(function(item, inde, array){
            return item.id !== id; //过滤条件，根据自己需求修改
        })
        init();
    }
    function init(){
        list.innerHTML = "";
        transactions.forEach(addTransactionDOM);
    }

（4）、点击“确定添加”按钮，每次都会新增一条

（5）、点击后面的删除按钮，会删除对应行的内容

二、先点新增，再录入信息，可随时修改
使用场景：各种业务列表信息的录入
（1）、先点新增，新增后列表会出现一条没有录入信息的损失项：

（2）、新增的该条选项，提交的时候必须管控是否录入完整

实际业务系统的使用中，第二种场景比较常见，因为一般业务场景复杂，需要录入的信息较多，另一方面要支持录入可修改。