javascript - 使用 jQuery 克隆文本区域时如何防止克隆值

Question

我试图在按钮单击时克隆一个 div，以便它基本上向博客文章添加另一个字段选项。除了一件事之外，我一切正常。当我克隆第一个 div(类似于模板)时，也会克隆文本区域的 val。我希望它克隆 div，而无需输入和文本区域中的任何值，因此它只显示占位符。我将在下面提供我的代码。任何帮助都会很棒!

我克隆的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();
      });
  });