javascript - 如何删除旧文本框,保存用户输入数据,同时添加新文本框 onclick?

标签 javascript

如何删除旧的文本框并保存用户输入,同时添加新的文本框 onclick?我希望用户能够添加新页面,而不显示旧页面。

<html>
  <head>
    <script>
	var boxCount=1;
	var boxName=0;
	function newBox(){
		var input=document.createElement("input");
			input.type="text"
			input.name="fname_"+boxCount;
			input.placeholder="fname_"+boxCount;
			document.getElementById('box').appendChild(input);
		var new_line=document.createElement("br");document.getElementById('box').appendChild(new_line);
		var new_line2=document.createElement("br");document.getElementById('box').appendChild(new_line2);
					
			boxCount++;
	}
</script>
    <head>
      <body>
		<button type="button" onclick="newBox()">Add Property</button><br/>
		<form action="#" method="post">
			<br/><span id="box"></span><br/><br/>
			<input type="submit" value="Submit">
		</form>
	</body>
</html>

最佳答案

您可以尝试将之前每个输入的类型设置为隐藏
见下文:

var input,
    inputCount = 0;

function newInput () {
  if (input !== undefined) {
    input.type = "hidden";  
  }
  inputCount++;
  
  input = document.createElement("input");
  input.type = "text";
  input.name = input.placeholder = "fname" + inputCount;
  document.getElementById("box").appendChild(input);
}
<button type="button" onclick="newInput()">Add Property</button><br/>
<form action="#" method="post">
  <br/><span id="box"></span><br/><br/>
  <input type="submit" value="Submit">
</form>

关于javascript - 如何删除旧文本框,保存用户输入数据,同时添加新文本框 onclick?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30552749/

相关文章:

javascript - Peg.js 区分缺失值和空格

javascript - Rails 网页加载时间较长

javascript - 在子组件上使用展开运算符时 React Native : what is a proper way to pass style as props,

javascript - 将值从 javascript 发布到 php 并在 php 中添加这些值

javascript - 如何使用 .addClass 设置下拉列表项

javascript - Vue 3 CKEditor 5 添加插件 CodeBlock 错误重复模块

javascript - 为什么绝对定位忽略顶部填充而不是左侧填充?

javascript - 为什么负载从 FCM 推送通知丢失?

javascript - 纯Javascript表格列悬停效果?

javascript - 如何检查对象是否是 DOM 元素?