Element still child of previous parent after moving it

Question

Answer in short: insertAfter() is to be used on the element that you are inserting after another element, not on the element that you want to insert something after. For full code, scroll down.

I have a situation where when the user clicks a button, certain elements get moved to a hidden container, and when the user clicks another button, those elements need to get moved back to their original position.

I do it (in short) like this:

Moving to hidden container:

element.data('original_parent', original_parent);
element.data('original_index', original_parent.index());
element.appendTo(hidden_container);

Moving the items back to their original container:

element.data('original_parent').children().eq(element.data('original_index')).prev().insertAfter(element);

But somehow this isn't working. When I output the children of the original parent to the console, it also lists the elements that are currently in the hidden container as children. Anyone have an idea of how I could fix this?

Answer 1

Your logic may not be not correct as the order in which it is removed and added might deffer – Arun P Johny 1 min ago

You are right. The elements are output to the console first, then I move them, which is why it seemd like an uncorrect parent was being listed as their parent.

Are you sure you're getting any element with doing element.data('original_parent')? – Dhaval Marthak 5 mins ago

An element is being returned for sure.

---

I have already found out what is happening here. I use the insertAfter function on the original element that I want to insert the element after instead of on the element that I want to insert after the original element. Got my jQuery functions mixed up a bit.

The rest of the code works, though! Full code for those that want to use the idea and come across this post:

function hideNonMatchingLevelElements(jquery_selector) {
    var elements = $(jquery_selector);

    if (!elements.length)
        return false;

    var target = $('#js-hidden-level-elements');

    if (!target.length) {
        console.error('Cannot hide non matching level elements because target cannot be found.');
        return false;
    }

    elements.each(function() {
        $(this).data('original_parent', $(this).parent());
        $(this).data('original_index', $(this).index());
        $(this).appendTo(target);
    });
}

function showMatchingLevelElements(jquery_selector) {
    var elements = $(jquery_selector);

    if (!elements.length)
        return false;

    elements.each(function() {
        // Only show elements that are in the "hidden elements" container.
        if ($(this).parent().attr('id') != 'js-hidden-level-elements')
            return true; // Continue;

        if (!$(this).data('original_parent'))
            return true; // Continue.

        $(this).insertAfter($(this).data('original_parent').children().eq($(this).data('original_index')).prev());
    });
}