javascript - 如何使用 jQuery 清除表单域？

Question

我对 div 元素使用 clone() 和 remove()。女巫制作 div 元素克隆。 在我提交的这个 div 元素中

$('.wrapper').on('click', '.remove', function() {
  $(this).closest('.wrapper').find('.element:not(:first):last').remove();
  setCloneButtonVisibility();
});

var cloneLimit = 12;

$('.wrapper').on('click', '.clone', function() {
  if ($('.results .element').length <= cloneLimit) { // just to make testing easier
    $(this).closest('.wrapper').find('.element:first').clone().appendTo('.results');
  }
  setCloneButtonVisibility();
});

function setCloneButtonVisibility() {
  $('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}
		
		$('.2').val('');

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element">
	  <input  name="text" type="text" />
 
	</div>
  <div class="results"></div>
  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>

当我单击克隆时，它会克隆提交的文本。 但是，如果我在文件中键入了文本，然后我在克隆文件中进行了克隆，则与我在第一个文件中输入的文本相同。如何清除每个新的克隆字段

Answer 1

找到 input 元素并将它们的值设置为空。

$('.wrapper').on('click', '.remove', function() {
  $(this).closest('.wrapper').find('.element:not(:first):last').remove();
  setCloneButtonVisibility();
});

var cloneLimit = 12;

$('.wrapper').on('click', '.clone', function() {
  if ($('.results .element').length <= cloneLimit) { // just to make testing easier
    $(this).closest('.wrapper').find('.element:first').clone()
      // end() reverts last filtering operation
      .find(':input').val('').end().appendTo('.results');
  }
  setCloneButtonVisibility();
});

function setCloneButtonVisibility() {
  $('.wrapper .clone').toggle($('.results .element').length < cloneLimit);
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">
  <div class="element">
    <input name="text[]" type="text" />
    <!-- For demonstration of the :input pseudoselector -->
    <select name="sel[]">
      <option value="" />
      <option value="1">Option 1</option>
      <option value="2">Option 2</option>
      <option value="3">Option 3</option>
    </select>
  </div>
  <div class="results"></div>
  <div class="buttons">
    <button class="clone">clone</button>
    <button class="remove">remove</button>
  </div>
</div>

引用资料:

.end()

:input