通过JavaScript克隆html元素后，如何清除输入字段并选择字段？

时间：2019-01-29 06:48:17

标签： javascript jquery html

我有一个包含多个输入字段和选择选项的表单，并且我正在使用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>

3 个答案:

答案 0 :(得分：2)

您可以在页面加载时克隆该元素（在函数外部）。这将确保克隆的元素将来自其原始状态。

请注意：属性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>

OR：：您可以清除所有克隆控件的值：

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>

答案 1 :(得分：0)

使用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>

答案 2 :(得分：0)

为此，我将使用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>

相关问题
最新问题