码迷,mamicode.com
首页 > Web开发 > 详细

js动态增加删除ul节点li

时间:2015-08-12 10:20:43      阅读:729      评论:0      收藏:0      [点我收藏+]

标签:

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>

 

js动态增加删除ul节点li

标签:

原文地址:http://my.oschina.net/u/1450300/blog/491064

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!