js动态增长删除ul节点li

js动态增长删除ul节点li

1.页面效果

点击添加，能够实现添加文本框；点击移除删除文本框

2.jsp文件

//jsp
<ul id="attrValueUL">
     <li class="attrValueLI" id="attrValueLI_1"><input name="attrValue" type="text"                 class="priceinput"  />
      <input name="attrValue" type="text" class="priceinput" />
      <input name="attrValue" type="text" class="priceinput" />
      <a href="javascript:void(0);" onclick="conAddAttrValue();" style="width:90px;">&nbsp;&nbsp;继续添加属性值</a>
     </li>
    </ul>

 

3.js

//js
<script type="text/javascript">
//添加属性值文本框
function conAddAttrValue(){
 var liNum=document.getElementsByClassName("attrValueLI").length;
 liNum=parseInt(liNum)+1;
 var text='<li class="attrValueLI"id="attrValueLI'+liNum+'" >';
 for (var i = 0; i < 3; i++) {
  text+='<input name="attrValue" type="text" class="priceinput"  />&nbsp;';
 }
 text+='&nbsp;&nbsp;<a href="javascript:void(0);" onclick="removeLi('+liNum+');" style="width:90px;">移除</a></li>';
 $(text).appendTo($("#attrValueUL"));
}
//删除属性值文本框
function removeLi(i){
 $("#attrValueLI"+i).remove();
}

</script>