通過JavaScript克隆html元素后，如何清除輸入字段並選擇字段？

Question

我有一個帶有多個輸入字段並選擇選項的表單，並且我正在使用cloneNode克隆整個div。

當輸入字段設置了值並且選擇了select元素時，克隆也將具有相同的值。

現在，我要做的是清除輸入字段，並在克隆之后重置select元素。

 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> 

Answer 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> 

Answer 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> 

Answer 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>