CODEWITHSUNDEEP
javascriptjqueryclone
user3403513
user3403513

Reputation: 1

How do I clone an element without doubling the number of elements every time?

I have 2 box's, divA and divB. Everytime divB is clicked, I want one divA to be cloned. This works fine the first time with my current code, but then it doubles the number of divA's everytime after. How do I stop this?

$(document).ready(function() {
    $('.divB').click(function() {
        // fade out divB when clicked
        $(this).fadeOut("slow");
        // Then clone divA and add to body
        $(".divA").clone('true').appendTo("body");
        // Then add a new divB to the body after the cloned divA
        $(".divB").clone('true').appendTo("body");
    });
 });

Upvotes: 0

Views: 56

Answers (1)

Arun P Johny
Arun P Johny

Reputation: 388316

Keep an external reference with 1 element reference

$(document).ready(function () {
    var $divB1 = $('.divB').first();
    var $divA1 = $('.divA').first();
    $('.divB').click(function () {
        // fade out divB when clicked
        $(this).fadeOut("slow");
        // Then clone divA and add to body
        $divA1.clone(true).appendTo("body");
        // Then add a new divB to the body after the cloned divA
        $$divB1.clone(true).appendTo("body");
    });
});

Also the argument is boolean true not string literal 'true'

Upvotes: 2

Related Questions