【html】动态增加横向带删除的列表

需要实现的效果

代码

html

<ul id="projUl">
                <label style="float: left; " class="l-btn-text">&nbsp;项目名称列表</label>
            </ul>

js代码

    function addLi(projName,projId){
        var li_1=document.createElement("li");
        addSpan(li_1,projName,projId);
        addHiddenSpan(li_1,projId);
        addDelBtn(li_1,projId);
        document.getElementById("projUl").appendChild(li_1);
    }
    //为姓名或邮箱等添加span标签，好设置样式
    function addSpan(li,text,id){
        var span_1=document.createElement("input");
        span_1.setAttribute("id",id);
        span_1.setAttribute("name","projectNames");
        span_1.setAttribute("class","form-control");
        span_1.setAttribute("style","width: 180px;height:24px");
        span_1.setAttribute("type","text");
        span_1.setAttribute("value",text);
        li.appendChild(span_1);
    }
    function addHiddenSpan(li,text){
        var span_1=document.createElement("input");
        span_1.setAttribute("name","projectIds");
        span_1.setAttribute("class","form-control");
        span_1.setAttribute("type","hidden");
        span_1.setAttribute("style","width: 180px;height:24px");
        span_1.setAttribute("value",text);
        li.appendChild(span_1);
    }
    //添加删除按钮及设置删除按钮的样式及添加点击事件
    function addDelBtn(li,id){
        var btn=document.createElement("a");
        btn.setAttribute("name",id);
        btn.setAttribute("onclick","delBtnData(this)");
        btn.setAttribute("href","javascript:void(0);");
        btn.setAttribute("class","easyui-linkbutton ebsButton detailButtonc l-btn l-btn-small l-btn-plain");
        btn.setAttribute("data-options","iconCls:'fa fa-1x fa-fw fa-trash',plain:true");
        var span_1=document.createElement("span");
        span_1.setAttribute("class","l-btn-left l-btn-icon-left");
        var span_2=document.createElement("span");
        span_2.setAttribute("class","l-btn-text l-btn-empty");
        span_2.innerHTML=' '
        var span_3=document.createElement("span");
        span_3.setAttribute("class","l-btn-icon fa fa-1x fa-fw fa-trash");
        span_1.appendChild(span_2);
        span_1.appendChild(span_3);

        btn.appendChild(span_1);
        li.appendChild(btn);
    }
    //为删除按钮添加删除节点功能
    function delBtnData(obj){
        var ul=document.getElementById("projUl");
        var oLi=obj.parentNode;
        //obj.parentNode指删除按钮的span层
        //obj.parentNode.parentNode为li层
        ul.removeChild(oLi);
    }

调用例子

addLi("哈哈哈哈",1234);