Clone div and remove class without changing the original one

Question

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.

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

4b0 · Answer 1 · 2017-05-25T06:40:14.207

4

You can use removeClass and addClass after clone like this.

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

edited May 25 '17 at 06:40

answered May 25 '17 at 06:29

4b0

21,981
30
95
142

score 1 · Answer 2 · answered May 25 '17 at 06:29

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

score 1 · Answer 3 · answered May 25 '17 at 06:29

1

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

answered May 25 '17 at 06:29

J.P.

24
3

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 '17 at 06:55

Clone div and remove class without changing the original one

3 Answers3