如何复制和删除表单

Question

目前我必须制作一个可以添加字段的表单，如果你不想要它们就删除它们。例如，下面的代码现在显示3个要填写的字段，因为您可以看到第一个字段没有删除按钮，但另外2个字段没有。还有一个复制字段的添加按钮。目前重复，是重复id =＆＃34; 2＆＃34;哪种工作，但一旦我删除id =＆＃34; 2＆＃34;我不能复制它。所以我的问题是，是否有可能复制id =＆＃34; 1＆＃34;同时在重复字段旁边出现一个按钮，用于删除它。我仅限于HTML，Css和Javascript。 THX。

＆＃13;

＆＃13;

function removesomething(){
	document.getElementById("1").remove();
}
function removesomething2(){
	document.getElementById("2").remove();
}
function removesomething3(){
	document.getElementById("3").remove();
}
var i = 0;
	function duplicate() {
	var parent = document.getElementById("2");

    var clone = parent.cloneNode(true);
    clone.id = "2" + ++i; 
    parent.appendChild(clone);
}

＆＃13;

.locationsector legend{
		font-size:2em;
	}

	.locationsector{
		border-radius:5px;
		border:5px solid black;
		width:30%;
		margin-left:0.7%;
		float:left;
		padding:10px;
	}
	label{
		padding:2%;
	}

	img{
		text-align:center;
		margin:2%;
		display:inline-block;
		border:10px solid black;
		padding:5px;
		width:150px;
		height:112px;
	}

＆＃13;

<form>
<fieldset class="locationsector">
	<legend>Field 1</legend>
		<label for="north1" id="1">Choose a Picture 
			<input type="file"  required="required"  />
			<img class="target" src="#" alt="Choose and Upload" />
		</label>
						
		<br>
								
		<label for="north2" id="2">Choose a Picture 
			<input type="file" id="2" required="required"/>
			<img class="target" src="#" alt="Choose and Upload" />
			<button onclick="removesomething2()">Remove</button>
		</label>
							
		<br>
							
		<label for="north3" id="3">Choose a Picture 
			<input type="file"  required="required"/>
			<img class="target" src="#" alt="Choose and Upload" />
			<button onclick="removesomething3()">Remove</button>
		</label>	
							
		<br>
		<button onclick="duplicate();">Add</button>
</fieldset>
<button onclick="check()">Submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

试试这个demo。像魅力一样工作:)现在你可以在aray中保存创建的输入字段，或者搜索qith jQuery表单中名称以var开头的所有输入

Answer 2

见下文。您可以通过引用删除元素，而不是按ID删除元素。当您单击添加时，您可以克隆第一个元素并将按钮附加到它。

删除点击按钮的父级：

function removesomething(e){
    e.parentNode.parentNode.removeChild(e.parentNode);
}

克隆第一个元素并将删除按钮添加到克隆：

var button = document.createElement('button');
button.type = 'button';
button.setAttribute("onclick", "removesomething(this)");
button.innerHTML = "Remove";
clone.appendChild(button);

＆＃13;

＆＃13;

function removesomething(e){
    e.parentNode.parentNode.removeChild(e.parentNode);
}

var i = 0;
	function duplicate() {
var parent = document.getElementById("1");

    var clone = parent.cloneNode(true);
    clone.id = "2" + ++i; 

var button = document.createElement('button');
button.type = 'button';
button.setAttribute("onclick", "removesomething(this)");
button.innerHTML = "Remove";


    clone.appendChild(button);
    parent.appendChild(clone);

}

＆＃13;

.locationsector legend{
		font-size:2em;
	}

	.locationsector{
		border-radius:5px;
		border:5px solid black;
		width:30%;
		margin-left:0.7%;
		float:left;
		padding:10px;
	}
	label{
		padding:2%;
	}

	img{
		text-align:center;
		margin:2%;
		display:inline-block;
		border:10px solid black;
		padding:5px;
		width:150px;
		height:112px;
	}

＆＃13;

<form>
<fieldset class="locationsector">
	<legend>Field 1</legend>
		<label for="north1" id="1">Choose a Picture 
			<input type="file"  required="required"  />
			<img class="target" src="#" alt="Choose and Upload" />
		</label>
						
		<br>
								
		<label for="north2" id="2">Choose a Picture 
			<input type="file" id="2" required="required"/>
			<img class="target" src="#" alt="Choose and Upload" />
			<button id="2" onclick="removesomething(this)">Remove</button>
		</label>
							
		<br>
							
		<label for="north3" id="3">Choose a Picture 
			<input type="file"  required="required"/>
			<img class="target" src="#" alt="Choose and Upload" />
			<button id="3" onclick="removesomething(this)">Remove</button>
		</label>	
							
		<br>
		<button onclick="duplicate();">Add</button>
</fieldset>
<button onclick="check()">Submit</button>
</form>

＆＃13;

＆＃13;

＆＃13;