0

El .original_div es fragmento de un formulario, mi intención es clonarlo luego de que se cargue el dom porque así los input están vacíos, el problema es que cuando clono el div fuera de la función y lo dejo en una variable luego solo lo puedo duplicar 1 vez cuando necesito clonarlo N veces.

Cuando utilizo la linea comentada puedo duplicarlo n veces pero me copia los valúes, ¿cómo podría limpiar los values a la hora de copiarlo?

Intenté con algo como:

$('.container_div').append($('#dv').attrRemove('value').clone());

o

$('.container_div').append($('#dv').clone().attrRemove('value'));

Pero luego de eso ya no puedo duplicarlo

¿Como podría solucionar este inconveniente?

Además, como podría solucionar el inconveniente del Id ya que se duplicaría las N veces que requiera duplicar el div, ¿puedo quitar un atributo del objeto dentro de la variable div_copy?

Intenté hacerlo con clases pero a la hora de presionar el boton agrega de manera proporcional en relación a todos los div que hayan dentro del container.

He replicado y simplificado de manera muy básica el problema, he aquí el codigo:

<!DOCTYPE html>
<html>
<head>
<script
  src="http://code.jquery.com/jquery-3.2.1.min.js"
  integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
  crossorigin="anonymous"></script>
    <title></title>
</head>
<style type="text/css">
    div{
        border: 2px solid #000;
        padding: 10px;
    }
</style>
<body>

<div class="container_div">
Div contenedor
    <div class="original_div" id="dv">
        <input type="text"> 
    </div>
</div>

<button id="btn"> Agregar</button>

<script>
    $(function(){
        var div_copy = $('#dv').clone();
        $('#btn').on('click',function(){
            $('.container_div').append(div_copy);
            //$('.container_div').append($('#dv').clone());
        });
    });
</script>
</body>
</html>
1
  • Sólo estás haciendo una copia de tu div clone() y moviéndolo de un lado a otro con el evento clic haciendo uso de append(). Tienes que incorporar la clonación dentro de dicho evento.
    – Yikarus
    el 27 jul. 2017 a las 19:19

1 respuesta 1

0

Buenas, debes integrar el .clone() dentro del EventListener. El tema de la id deberías poner una variable autoincremental o ponerlo como clase.

Tu código quedaría así:

$(function() {
            $('#btn').on('click', function() {
                var div_copy = $('#dv').clone();
                div_copy.children().val("");//para quitar el valor
                $('.container_div').append(div_copy);
            });
        });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<!DOCTYPE html>
<html>

<head>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous"></script>
    <title></title>
</head>
<style type="text/css">
    div {
        border: 2px solid #000;
        padding: 10px;
    }
</style>

<body>

    <div class="container_div">
        Div contenedor
        <div class="original_div" id="dv">
            <input type="text">
        </div>
    </div>

    <button id="btn"> Agregar</button>
    
    </body>

</html>

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.