5

I want to clone the content of the div using jQuery, but from the copied content I want to remove the class from the original one before I use appendTo function. When I remove the class from a clone they also remove from the original one.

My code is:

$('.carousel .item').each(function(){
        var next = $(this).next();

        if (!next.length) {
            next = $(this).siblings(':first');
        }
        next.children(':first-child').clone().appendTo($(this));
        next.children(':first-child').addClass('col-sm-offset-1');

        for (var i=0;i<3;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            next.children(':first-child').clone().appendTo($(this));                 
        }

});

Please note, I don't want to remove class from actual div from where I copied the content, I just want to remove it from the copied code so that it is not included in the cloned div.

2
  • i don't see code to remove class , can you update your code with remove class , where are you trying to remove class May 25, 2017 at 6:19
  • next.children(':first-child').removeClass('col-sm-offset-1').clone().appendTo($(this)); //here i remove the clone div class
    – suraj
    May 25, 2017 at 6:54

3 Answers 3

5

You can use removeClass and addClass after clone like this.

 .clone().removeClass('oldClass').addClass('col-sm-offset-1')
0
1

You can remove element from cloned object first and then clone to your new object which would be something like shown below:

$('.carousel .item').each(function(){ var next = $(this).next();    
        if (!next.length) {
            next = $(this).siblings(':first');
        }
        var $block = next.children(':first-child');

        // Grab the and remove element class
        $block = $block.find('.your-element-identity-class').removeClass('your-element-identity-class');

        // Clone the block 
        var $clone = $block.clone();

        $clone.appendTo($(this));
        next.children(':first-child').addClass('col-sm-offset-1');

        for (var i=0;i<3;i++) {
            next=next.next();
            if (!next.length) {
                next = $(this).siblings(':first');
            }
            var $block = next.children(':first-child');

            // Grab the and remove element class
            $block = $block.find('.your-element-identity-class').removeClass('your-element-identity-class');

            // Clone the block 
            var $clone = $block.clone();

            $clone.appendTo($(this));                
        }

    });

Replace "your-element-identity-class" with your class name you want to remove. Original ref. from - How to remove the selected element during a clone() operation

1

You should be able to run removeClass() on the object before you append it, regardless of where you want to append it to.

1
  • next.children(':first-child').removeClass('col-sm-offset-1')‌​.clone().appendTo($(‌​this)); i use this but its remopve from original div also
    – suraj
    May 25, 2017 at 6:55

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.