Como evitar clonar o valor ao clonar textarea com jQuery - javascript, jquery, html

Estou tentando clonar uma div no clique no botãoque basicamente adicionou outra opção de campo à postagem do blog. Eu tenho tudo funcionando bem, exceto uma coisa. Quando clono, a primeira div (agindo como um modelo) também é clonada no valor da área de texto. Eu quero que ele clone a div sem nenhum dos valores na entrada e na área de texto, para que apenas mostre o espaço reservado. Fornecerei meu código abaixo. Qualquer ajuda seria ótimo!

A clonagem div I

 <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();
});
});

Respostas:

Isso deve fazer o truque. Você nem sempre precisa fazer todas as coisas em uma única linha.

  $(".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();
});
});