需要实现的效果
代码
html
<ul id="projUl">
<label style="float: left; " class="l-btn-text"> 项目名称列表</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);