Add new field and leave it empty

Question

I am using a jQuery (clone) to copy a line and add it to the element, but if I have this line filled in, it comes exactly like this! I need that when cloning this line, the forms come empty.

HTML

<div class="container_linhas">
    <div id="linha_1" class="linha" style="padding: 2px">
      <label>Tipo de Provento</label>
      <select style="width: 480px" name="provento_tipo[]">
            <option>Selecione o Tipo de Provento</option>
            <?
                foreach($lista_adicionais_desconto as $valor){ 
            ?>
            <option value="<? echo $valor->idParametro; ?>"><? echo $valor->parametro; ?></option>
            <? } ?>
        </select>
        <select class="input-small" name="provento_formato[]">
            <option value="1">R$</option>
            <option value="2">%</option>
        </select>
        <input type="text" class="input-small" name="provento_valor[]">  

        <button type="button" class="removelinha" id="removelinha" style="display:none"><i class="icon-remove"></i></button>
        <button class="btn btn-small clonarlinha" type="button" id="clonarlinha" style="margin-top: 3px">
            <i class="icon-plus-sign"></i>
        </button>                                                  
    </div>
</div>                                

jQuery

$(document).ready(function(e) {
    $('.clonarlinha').click(function(e) {
        //exibe botões de remover
        $(this).parent().parent().find('.removelinha').css('display', 'inline-block');

        //clona linha e atribui novo ID incrementando
        $(this)
            .parent()
            .clone(true)
            .appendTo( $(this).parent().parent() )
            .attr('id', 'linha_' + $(this).parent().parent().children( ".linha" ).length)
            .find('.removelinha').css('display', 'inline-block');

        //remove botão de clonagem repetido
        $(this).parent().parent().find('.clonarlinha:first').remove();

    });

    $('.removelinha').click(function(e) {
        var container = $(this).parent().parent();

        //se tiver mais de uma linha permite remover
        if ($(container).find('.linha').length > 1) {
            //faz uma cópia do botão clonar
            var btnClonar = $(this).parent().find('.clonarlinha').clone(true);

            //remove a linha
            $(this).parent().remove().after(function(){

                //caso a linha removido contenha o botão clonar, insere o mesmo nvamente
                if ( $(container).find('.clonarlinha').length == 0 ) {
                    $(container).find('.linha:last').append(btnClonar);
                }
                if ($(container).find('.linha').length == 1) {
                    $(container).find('.removelinha').css('display', 'none');
                }
            });

        }
    });
});

Answer 1

You can user the find on your cloned item and change the value of the items within it.

$(this).parent().clone(true).find('select, input').val('')

Answer 2

You can use our friend @Jefersonassis' solution by adding the quotation marks in val('), thus:

$(this)
    .parent()
    .clone(true)
    .find('select, input').val('')
    .appendTo( $(this).parent().parent() )
    .attr('id', 'linha_' + $(this).parent().parent().children( ".linha" ).length)
    .find('.removelinha').css('display', 'inline-block');

Follows jsfiddle

Answer 3

Sirs,

I got the solution that way:

//clona linha e atribui novo ID incrementando
tmp = $(this).parent().clone(true);
tmp.find('.limpar_campo').val("");
tmp.appendTo( $(this).parent().parent() );
tmp.attr('id', 'linha_' + $(this).parent().parent().children( ".linha" ).length);
tmp.find('.removelinha').css('display', 'inline-block');

And I applied the "clear field" class to the form that needed to be cleaned! All right now. Obg!