javascript - 如何克隆包含没有值的表单的 元素？

Question

我正在尝试复制一个包含部分 HTML 表单的元素。我已经让它工作了，但是如果没有在被克隆的部分中键入的值，就无法克隆该部分。我在下面显示我的代码。

    document.getElementById('showmore').onclick = duplicate;
    var i = 1;
    var original = document.getElementById('fieldset1');
    var boton = document.getElementById("showmore");

    function duplicate() {
      if (i = 1) {
        var clone = original.cloneNode(true);
        clone.id = "fieldset" + ++i;
        original.parentNode.insertBefore(clone, boton.previousSibling);
      }
    }

<div id='fieldset1'>
      <hr>
      <div class='control-group form-group'>
        <div class='controls'>
          <label>Cause</label>
          <textarea name='cause[]' maxlength='100' class='form-control' required></textarea>
        </div>
      </div>

      <div class='control-group form-group'>
        <div class='controls'>
          <label>Effect</label>
          <textarea name='effect[]' maxlength='100' class='form-control' required></textarea>
        </div>
      </div>

      <div class='control-group form-group'>
        <div class='controls'>
          <label>Knowledge</label>
          <textarea name='knowledge[]' maxlength='300' class='form-control'></textarea>
        </div>
      </div>

      <div class='control-group form-group'>
        <div class='controls'>
          <label>Actions</label>
          <textarea name='actions[]' maxlength='300' class='form-control'></textarea>
        </div>
      </div>

    </div>

    <button type='button' onlick='duplicate()' class='btn btn-warning' id='showmore'> Add more</button>

Answer 1

您有两种选择，一种是在克隆后手动清空值，这是不必要的。第二个是在第一次运行时做一个默认的克隆，请看下面的代码。

document.getElementById('showmore').onclick = duplicate;
var i = 1;
var original = document.getElementById('fieldset1');
var boton = document.getElementById("showmore");
// make an empty default clonad form 
// before the user type anything
var emptyForm = original.cloneNode(true);

function duplicate() {
  if (i = 1) {
    // then only clone this empty form
    var clone = emptyForm.cloneNode(true);
    clone.id = "fieldset" + ++i;
            original.parentNode.insertBefore(clone,boton.previousSibling);
  }
}

<div id='fieldset1'>
  <hr>
  <div class='control-group form-group'>
    <div class='controls'>
      <label>Cause</label>
      <textarea name='cause[]' maxlength='100' class='form-control' required></textarea>
    </div>
  </div>

  <div class='control-group form-group'>
    <div class='controls'>
      <label>Effect</label>
      <textarea name='effect[]' maxlength='100' class='form-control' required></textarea>
    </div>
  </div>

  <div class='control-group form-group'>
    <div class='controls'>
      <label>Knowledge</label>
      <textarea name='knowledge[]' maxlength='300' class='form-control'></textarea>
    </div>
  </div>

  <div class='control-group form-group'>
    <div class='controls'>
      <label>Actions</label>
      <textarea name='actions[]' maxlength='300' class='form-control'></textarea>
    </div>
  </div>

</div>

<button type='button' onlick='duplicate()' class='btn btn-warning' id='showmore'> Add more</button>