使用jQuery

Question

我正在尝试克隆按钮单击的div，以便它基本上为博客帖子添加了另一个字段选项。我做的一切都很好，除了一件事。当我克隆第一个div（表现类似模板）时，也克隆了textarea的val。我希望它克隆div而没有输入和textarea中的任何值，所以它只显示占位符。我将在下面提供我的代码。任何帮助都会很棒！

我克隆的div

 <div class="multi-fields">
     <div class="multi-field">
         <div class="col-12 padding-top-thirty">
            <h1>Click To Edit Title</h1>
        </div>
        <input type="file" name="file_array[]">
        <textarea name="file_array_caption[]" placeholder="Add Caption Here......"></textarea>
        <button  name="delete" type="button" class="remove-field">Remove</button>
    </div>
</div>


  // add new field to the blog editor
  $('.multi-field-wrapper').each(function() {
      var $wrapper = $('.multi-fields', this);
      $(".add-field", $(this)).click(function(e) {
          var clone = $('.multi-field:first-child', $wrapper).clone(true).appendTo($wrapper).val("").end();
      });
      $('.multi-field .remove-field', $wrapper).click(function() {
          if ($('.multi-field', $wrapper).length > 1)
              $(this).parent('.multi-field').remove();
      });
  });

Answer 1

这应该可以解决问题。您并不总是需要在一行中完成所有事情。

  $('.multi-field-wrapper').each(function() {
      var $wrapper = $('.multi-fields', this);
      $(".add-field", $(this)).click(function(e) {
          var clone = $('.multi-field:first-child', $wrapper).clone(true);
          clone.find('input').val('');    // Clear all inputs in the clone object
          clone.find('textarea').val(''); // Clear all textareas in the clone object
          clone.appendTo($wrapper);
      });
      $('.multi-field .remove-field', $wrapper).click(function() {
          if ($('.multi-field', $wrapper).length > 1)
              $(this).parent('.multi-field').remove();
      });
  });