Problems cloning a div with jQuery

Question

Problems cloning a div with jQuery

Navigation

#1 by (0 votes)

0

The .original_div is a fragment of a form, my intention is to clone it after loading the sun because the input is empty, the problem is that when I clone the div out of the function and leave it in a variable then I can only duplicate it once when I need to clone it N times.

When I use the commented line I can duplicate it n times but I copy the values, how could I clean the values when copying it?

I tried something like:

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

or

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

But after that I can not duplicate it anymore

How could I solve this problem?

Also, since I could solve the inconvenience of the Id since it would duplicate the N times that the div needs to be duplicated, can I remove an attribute of the object inside the variable div_copy?

I tried to do it with classes but at the time of pressing the button it adds proportionally in relation to all the div inside the container.

I have replicated and simplified the problem in a very basic way, here is the code:

<!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>

jquery div

asked by César Alejandro M 27.07.2017 в 19:58

source

1 answer

Filter a ListView on an Android CursorAdapter Consume configuration file within an HTML

score 0 · Accepted Answer

Good, you must integrate the .clone() within the EventListener . The subject of the id should put a variable autoincremental or put it as class .

Your code would look like this:

$(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>