表单动态添加button和给button添加删除事件

kunyou7003 2016-09-24 06:11:58

现在需要在上图的基础上添加新功能,也就是点击add more后,将表单克隆后添加在原表单后,并且在add more按钮右面添加一个delete的按钮,按钮具有将新添加表单删除的功能。我写的代码如下:
<script>
function addmore(classname) {

$('.'+classname).next('.addframe').append('<br>' + $('.'+classname).html());
var delbutton = document.createElement('button');
delbutton.type ='button';
delbutton.value ='Delete';
var mydiv=document.getElementById("buttondiv1");
mydiv.appendChild(delbutton);
delbutton.addEventListener('click',deletenew);
}
function deletenew(){
var divNode = document.getElementByName("firstframe");
divNode[divNode.length-1].removeNode(true);}
</script>
<div class="firstframe" name="firstframe">
<li></li><input></input>
<li></li><input></input>
<li></li><input></input>
<li></li><input></input>
<!--这个是表单-->
</div>
<div class="addframe"> </div>
<li class="msg">
<span> </span>
<div id="buttondiv1"class="wid350 myright">
<button id="button1" type="button" onClick="addmore('firstframe')">Add More</button>

运行后效果图
但是不知道为什么按钮的value显示不出来,css样式也不对,应该与add more样式一致的。点击delete并没有删除的效果
...全文
292 1 打赏 收藏 转发到动态 举报
写回复
用AI写文章
1 条回复
切换为时间正序
请发表友善的回复…
发表回复
its_good 2016-09-24
  • 打赏
  • 举报
回复
1、按钮文字: 你定义的是button元素,而不是input[type=button],所以不能使用value属性定义文本。 var delbutton = document.createElement('button'); delbutton.value ='Delete'; // wrong 参考:http://stackoverflow.com/questions/8542000/setting-a-buttons-value-using-javascript http://www.permadi.com/tutorial/jsInnerHTMLDOM/ 2、删除表单功能: 通过名字查找表单的方法名字有误,应该为getElementsByName(), 肯定有多个表单是相同的名字。 参考:http://www.w3school.com.cn/jsref/met_doc_getelementsbyname.asp removeNode 这个功能我没有用过,是在网上搜的说明: “ appendNode在IE和Firefox下都能正常使用,但是removeNode只能在IE下用。 ” (本机测试Edge也是不可用的,浏览器都死掉了--) 参考:https://sjolzy.cn/Compatibility-of-IE-and-Firefox-js-Summary.html

87,901

社区成员

发帖
与我相关
我的任务
社区描述
Web 开发 JavaScript
社区管理员
  • JavaScript
  • 无·法
加入社区
  • 近7日
  • 近30日
  • 至今
社区公告
暂无公告

试试用AI创作助手写篇文章吧