1

I have 3 different variations of "append" going on from different demos because I was trying to get anything to work, but none of them appear to be doing anything at all. I know the jQuery works because remove() on the original element works just fine when I uncomment it out.

Can you tell me what I'm missing here? Can you also tell me which variation I should be using/what the difference is?

Here's where I'm building: Stable Demo

The jQuery (on demo site)

jQuery(document).ready(function($) {

    $(".simplefilter").clone().appendTo($(".filtering-wrap")); // doesn't work
    $(".simplefilter").clone().append($(".filtering-wrap")); // doesn't work either
    $(".simplefilter").clone().appendTo(".filtering-wrap"); // also doesn't work
    $(".simplefilter").remove(); // This does work when enabled     

});

The Filter Code to Clone (on demo site)

<ul class="simplefilter simplefilter_3985">
  <li class="active" data-filter="all">all</li>
  <li data-filter="1">Stores</li>
  <li data-filter="2">Creative</li>
  <li data-filter="3">Amazon</li>
</ul>

The AppendTo Container

<div class="filtering-wrap"></div>
4
  • 3
    1) Where is the .simplefilter element? 2) You don't need to 2 document.ready event handlers 3) Your .appendTo(".filtering-wrap") should work, if everything has been set up correctly 4) remove() will be removing it immediately after appending, so you may need to comment that line Mar 19, 2019 at 16:37
  • My assumption is the user is expecting the remove() to not be affecting the cloned elements just inserted, which would not be the case.
    – Taplar
    Mar 19, 2019 at 16:41
  • That is true, I do not want to remove them both. I have the remove() commented out right now because I thought that might be removing both elements, but alas - it still doesn't clone over. Thanks for checking. Mar 19, 2019 at 16:42
  • Simple filter is within the demo - I can copy over what's being output and edit my question. Thanks. Mar 19, 2019 at 16:43

1 Answer 1

1

You can select the elements, append their clone to the destination, and then remove them.

jQuery(document).ready(function($) {
  var $filters = $('.simplefilter');
  
  $filters.clone().appendTo('.filtering-wrap');
  $filters.remove();
});
.filtering-wrap {
  background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtering-wrap"></div>

<div class="simplefilter">Filter 1</div>
<div class="simplefilter">Filter 2</div>
<div class="simplefilter">Filter 3</div>

But really, if you are going to remove them, just move them and do not clone.

jQuery(document).ready(function($) {
  $('.simplefilter').appendTo('.filtering-wrap');
});
.filtering-wrap {
  background-color: gray;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="filtering-wrap"></div>

<div class="simplefilter">Filter 1</div>
<div class="simplefilter">Filter 2</div>
<div class="simplefilter">Filter 3</div>

Elements can only have one parent at a time, so attempting to append an element that already exists in the DOM will cause jQuery to move them, not create a duplicate.

1
  • Thank you VERY much! I will take this answer and keep it in my toolbox. Mar 19, 2019 at 16:58

Your Answer

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

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