标签:
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;"> 继续添加属性值</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" /> ‘; } text+=‘ <a href="javascript:void(0);" onclick="removeLi(‘+liNum+‘);" style="width:90px;">移除</a></li>‘; $(text).appendTo($("#attrValueUL")); } //删除属性值文本框 function removeLi(i){ $("#attrValueLI"+i).remove(); } </script>
标签:
原文地址:http://my.oschina.net/u/1450300/blog/491064