【问题标题】：How do I clear input fields and select fields after cloning html elements via JavaScript?如何在通过 JavaScript 克隆 html 元素后清除输入字段并选择字段？
【发布时间】：2019-01-29 06:48:16
【问题描述】：
我有一个包含多个输入字段和选择选项的表单，我正在使用cloneNode 克隆整个 div。
当输入字段设置了值并且选择了选择元素时，会发生这种情况，克隆也具有相同的值。
现在我要做的是清除输入字段并在克隆后重置选择元素。
var i = 0;
function duplicate() {
var original = document.getElementById('duplicater' + i);
// console.log(original);
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + ++i;
original.parentNode.appendChild(clone);
}
<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="dynamicContainer">
<div id="duplicater0">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="message">
Message
</label>
<textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea>
</div>
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select" name="select">
<option value="First Choice">
First Choice
</option>
<option value="Second Choice">
Second Choice
</option>
<option value="Third Choice">
Third Choice
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
<a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
【问题讨论】：
标签：
javascript
jquery
html
【解决方案1】：
您可以在页面加载时克隆元素（在函数之外）。这将确保克隆的元素处于其原始状态。
请注意：属性id 在文档中必须是唯一的。如果您要使用 id 引用克隆的元素，那么您将只会获得第一个匹配的元素。您可以改用 class。
var i = 0;
var original = document.getElementById('duplicater' + i);
var clone = original.cloneNode(true); // "deep" clone
function duplicate() {
clone.id = "duplicater" + ++i;
original.parentNode.appendChild(clone);
}
<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="dynamicContainer">
<div id="duplicater0">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control name" id="name" name="name" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="message">
Message
</label>
<textarea class="form-control message" cols="10" id="message" name="message" rows="2"></textarea>
</div>
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select" name="select">
<option value="First Choice">
First Choice
</option>
<option value="Second Choice">
Second Choice
</option>
<option value="Third Choice">
Third Choice
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
<a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
或：您可以清除所有克隆控件的值：
var i = 0;
function duplicate() {
var original = document.getElementById('duplicater' + i);
var clone = original.cloneNode(true); // "deep" clone
clone.querySelector('.name').value = '';
clone.querySelector('.message').value = '';
clone.querySelector('.select').value = 'First Choice';
clone.id = "duplicater" + ++i;
original.parentNode.appendChild(clone);
}
<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="dynamicContainer">
<div id="duplicater0">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control name" id="name" name="name" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="message">
Message
</label>
<textarea class="form-control message" cols="10" id="message" name="message" rows="2"></textarea>
</div>
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select" name="select">
<option value="First Choice">
First Choice
</option>
<option value="Second Choice">
Second Choice
</option>
<option value="Third Choice">
Third Choice
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
<a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
【解决方案2】：
使用 Jquery 你可以做这样的事情。
var i = 0;
function duplicate() {
var original = document.getElementById('duplicater' + i);
// console.log(original);
var clone = original.cloneNode(true); // "deep" clone
clone.id = "duplicater" + ++i;
original.parentNode.appendChild(clone);
$("#duplicater"+i).find('input,textarea,select').val('');
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet"/>
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="dynamicContainer">
<div id="duplicater0">
<div class="form-group ">
<label class="control-label " for="name">
Name
</label>
<input class="form-control" id="name" name="name" type="text"/>
</div>
<div class="form-group ">
<label class="control-label " for="message">
Message
</label>
<textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea>
</div>
<div class="form-group ">
<label class="control-label " for="select">
Select a Choice
</label>
<select class="select form-control" id="select" name="select">
<option value="First Choice">
First Choice
</option>
<option value="Second Choice">
Second Choice
</option>
<option value="Third Choice">
Third Choice
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">
Submit
</button>
<a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
【解决方案3】：
我会为此使用 jQuery .clone()，它还有一个深度克隆选项（这里可能不需要）。
function duplicate(index = 0) {
var $orig = $('#duplicater' + index);
$orig
.clone()
.attr('id', 'duplicater' + ++index)
.find('[name]')
.val('')
.end()
.appendTo($orig.parent().append('<hr/>'));
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://formden.com/static/cdn/bootstrap-iso.css" rel="stylesheet" />
<div class="bootstrap-iso">
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<form method="post">
<div class="dynamicContainer">
<div id="duplicater0">
<div class="form-group ">
<label class="control-label " for="name">Name</label>
<input class="form-control" id="name" name="name" type="text" />
</div>
<div class="form-group ">
<label class="control-label " for="message">Message</label>
<textarea class="form-control" cols="10" id="message" name="message" rows="2"></textarea>
</div>
<div class="form-group ">
<label class="control-label " for="select">Select a Choice</label>
<select class="select form-control" id="select" name="select">
<option value="First Choice">
First Choice
</option>
<option value="Second Choice">
Second Choice
</option>
<option value="Third Choice">
Third Choice
</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<div>
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
<a href="javascript:void(0);" id="button" onclick="duplicate()" class="btn btn-default">Add More</a>
</div>
</div>
</form>
</div>
</div>
</div>
</div>