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>