关于js动态增加删除textarea的问题，增加可以，删除不行。用input控制可以，用herf控制不行！
代码如下：<html><head><title>动态添加html元素</title><scripttype="text/javascript"><!--vartextNu...
代码如下：<html>
<head>
<title>动态添加html元素</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addCheckDetail(form,afterElement){
textNumber++;
// 创建文本标签
var label1 = document.createElement("label");
// 创建文本框
var textField = document.createElement("textarea");
textField.setAttribute("name","text"+textNumber);
textField.setAttribute("cols",80);
textField.setAttribute("rows",3);
textField.setAttribute("id","text"+textNumber);
// 增加标签文本注释
label1.appendChild(document.createTextNode("步骤"+textNumber+":"));
// 把textField放入标签中
label1.appendChild(textField);
// 把所有的这些增加到form中
afterElement.parentNode.insertBefore(label1,afterElement);
}
function removeCheckDetail(form,afterElement){
// 假如有文本框个数超过一个
if (textNumber > 1) {
// 删除最后一个添加的文本框
form.removeChild(document.getElementById("text"+textNumber).parentNode);
textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<table>
<label>步骤1:<textarea name="text" id="text" cols="80" rows="3"></textarea></label>
<p>
<a href="#" onclick="addCheckDetail(this.form,this.parentNode)" > 添加一个步骤</a>
<a href="#"onclick="removeCheckDetail(this.form)" > 删除最后一个步骤 </a>
</p>
<p><input type="Submit" value="保存" /></p>
</table>
</form>
</body>
</html>
--------------------------------
如上，当删除时，不能删除。
但如果将<a href="#"onclick="removeCheckDetail(this.form)" > 删除最后一个步骤 </a>替换为<input type="button" value="删除最后一个步骤" onclick="removeCheckDetail(this.form)" />时就没有问题。
请教：为什么？
如果我用href来控制，应该怎么修改使得删除可以正常使用？ 展开
<head>
<title>动态添加html元素</title>
<script type="text/javascript">
<!--
var textNumber = 1;
function addCheckDetail(form,afterElement){
textNumber++;
// 创建文本标签
var label1 = document.createElement("label");
// 创建文本框
var textField = document.createElement("textarea");
textField.setAttribute("name","text"+textNumber);
textField.setAttribute("cols",80);
textField.setAttribute("rows",3);
textField.setAttribute("id","text"+textNumber);
// 增加标签文本注释
label1.appendChild(document.createTextNode("步骤"+textNumber+":"));
// 把textField放入标签中
label1.appendChild(textField);
// 把所有的这些增加到form中
afterElement.parentNode.insertBefore(label1,afterElement);
}
function removeCheckDetail(form,afterElement){
// 假如有文本框个数超过一个
if (textNumber > 1) {
// 删除最后一个添加的文本框
form.removeChild(document.getElementById("text"+textNumber).parentNode);
textNumber--;
}
}
//-->
</script>
<style type="text/css">
<!--
label {
display:block;
margin:.25em 0em;
}
-->
</style>
</head>
<body>
<form id="myForm" method="get" action="./" />
<table>
<label>步骤1:<textarea name="text" id="text" cols="80" rows="3"></textarea></label>
<p>
<a href="#" onclick="addCheckDetail(this.form,this.parentNode)" > 添加一个步骤</a>
<a href="#"onclick="removeCheckDetail(this.form)" > 删除最后一个步骤 </a>
</p>
<p><input type="Submit" value="保存" /></p>
</table>
</form>
</body>
</html>
--------------------------------
如上，当删除时，不能删除。
但如果将<a href="#"onclick="removeCheckDetail(this.form)" > 删除最后一个步骤 </a>替换为<input type="button" value="删除最后一个步骤" onclick="removeCheckDetail(this.form)" />时就没有问题。
请教：为什么？
如果我用href来控制，应该怎么修改使得删除可以正常使用？ 展开
2个回答
展开全部
A标签没有form属性,所以this.form会失败,但INPUT标签有form属性,可以返回所在表单.
只需要改一下调用即可,
<a href="#" onclick="addCheckDetail(document.getElementById('myForm'),this.parentNode)" >
另一处this.form按同样的方法修改.
只需要改一下调用即可,
<a href="#" onclick="addCheckDetail(document.getElementById('myForm'),this.parentNode)" >
另一处this.form按同样的方法修改.
本回答由提问者推荐
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
展开全部
把
<table>
<label>步骤1:<textarea name="text" id="text" cols="80" rows="3"></textarea></label>
<p>
<a href="#" onclick="addCheckDetail(this.form,this.parentNode)" > 添加一个步骤</a>
<a href="#"onclick="removeCheckDetail(this.form)" > 删除最后一个步骤 </a>
</p>
<p><input type="Submit" value="保存" /></p>
</table>
改成如下就OK了！
<div id="tab1">
<label>步骤1:<textarea name="text" id="text" cols="80" rows="3"></textarea></label>
<p>
<a href="#" onclick="addCheckDetail(this.form,this.parentNode)" >添加一个步骤</a>
<a href="#" onclick="removeCheckDetail(tab1)" > 删除最后一个步骤 </a>
</p>
</div>
<p><input type="Submit" value="保存" /></p>
<table>
<label>步骤1:<textarea name="text" id="text" cols="80" rows="3"></textarea></label>
<p>
<a href="#" onclick="addCheckDetail(this.form,this.parentNode)" > 添加一个步骤</a>
<a href="#"onclick="removeCheckDetail(this.form)" > 删除最后一个步骤 </a>
</p>
<p><input type="Submit" value="保存" /></p>
</table>
改成如下就OK了！
<div id="tab1">
<label>步骤1:<textarea name="text" id="text" cols="80" rows="3"></textarea></label>
<p>
<a href="#" onclick="addCheckDetail(this.form,this.parentNode)" >添加一个步骤</a>
<a href="#" onclick="removeCheckDetail(tab1)" > 删除最后一个步骤 </a>
</p>
</div>
<p><input type="Submit" value="保存" /></p>
已赞过
已踩过<
评论
收起
你对这个回答的评价是？
推荐律师服务：
若未解决您的问题，请您详细描述您的问题，通过百度律临进行免费专业咨询
