How to remove class name from content copied using the clone()

Question

I have a website and we're trying to setup a continues looping similar to this stack answer OR What Lies Below website

In our website we also have some elements that are being parallaxed. The parallaxed elements all have the class name "parallax". When I'm cloning and appending the cloned content, it's using the parallax class name and I need to get rid of it. So I thought I could just

JS

var clone = $("body").contents().clone();
var updatedClone = $(clone).find('.content').removeClass('parallax');
updatedClone.appendTo("body");
updatedClone.prependTo("body");

HTML

<body>
<main class"content">
    <div class="" style="margin-top:0%">
        <ul id="scene-header">
             <li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
             <li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
         </ul>
     <div>
         <ul class="divider">
             <li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
             <li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
             <li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
             <li class="" id="backgroundcolor-layer"></li>
         </ul>
     </div>
     </div>
</main>
</body>

But the appended content on the site is still adding the "parallax" class name. What simple thing am I forgetting?

Are you trying to remove `.parallax` class from all the img elements? — NiK648, Jun 30 '18 at 15:08

score 0 · Answer 1 · answered Jun 30 '18 at 15:11

0

Don't include the period in the class name on the removeClass function.

var updatedClone = $(clone).find('.content').removeClass('parallax');

https://api.jquery.com/removeclass/

answered Jun 30 '18 at 15:11

John Mitchell

1
1

Meant to do that before posting the comment. I did remove the period and the issue still persists. – SolidFire Jun 30 '18 at 15:13

Jagjeet Singh · Accepted Answer · 2018-06-30T15:52:39.333

clone() return jQuery object so you can use it to find and remove class

Try this :

var clone = $('body').find('.content').clone();
clone.find('.parallax').removeClass('parallax'); // Find all content with class parallax and remove class
clone.appendTo('body');
//clone.prependTo('body');

.parallax {
  border: 5px solid #000;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main class="content">
    <div class="" style="margin-top:0%">
        <ul id="scene-header">
             <li class="layer" id="logo" style="text-align: center;"> <img src="dist/images/logoSVG.svg" alt="" class="parallax logo"> </li>
             <li class="layer" id="ice-hole" rotate-speed="4"> <img src="dist/images/snow_layer_03.png" alt="" class="parallax ice-hole"> </li>
         </ul>
     <div>
         <ul class="divider">
             <li class="" id="snow-layer"> <img class="snow-layer parallax" src="dist/images/snow_cap.png" style="width: 100%;"> </li>
             <li class="" id="ice-layer"> <img class="ice-layer parallax" src="dist/images/ice.png" class="rellax" style="width: 100%;"> </li>
             <li class="" id="darkice-layer"> <img class="darkice-layer parallax" src="dist/images/darkice.png" style="width: 100%;"> </li>
             <li class="" id="backgroundcolor-layer"></li>
         </ul>
     </div>
     </div>
</main>

Tried it and indeed it worked fine! I was forgetting that it was returning an object. Thank you! — SolidFire, Jun 30 '18 at 16:19

How to remove class name from content copied using the clone()

2 Answers2