Steven
Steven

Reputation: 19435

Not able to remove cloned list elements

I'm cloning list items in a menu and I have an on click action on the back link where the cloned elements should be removed.

But they are not removed and each time I click a menu item, the sub menu keeps growing.

I've tried different approaches:

$('.portal-sub-menu').empty()
$('.portal-sub-menu').remove()
$('.portal-sub-menu').children().remove()

You can see the fiddle here: http://jsfiddle.net/spstieng/MdJsL/8/

Why can't I remove the cloned items?

Upvotes: 0

Views: 46

Answers (2)

Robert Messerle
Robert Messerle

Reputation: 3032

Here is a fixed JSFiddle:

http://jsfiddle.net/MdJsL/12/

Updated JS:

$('.portal-menu a').click(function () {
    $('.portal-menu').addClass('slide');
    return false;
});

$('.portal-menu > li a').on('click', function () {
    $(this).next().children().clone(true, true).appendTo('.portal-sub-menu');
    $('.portal-sub-menu .back').on('click', function () {
        $('.portal-menu').removeClass('slide')
        setTimeout(function () {
            $('.portal-sub-menu').empty();
        }, 800);
        return false;
    });
});
  • I removed your .done() call - since your animation is happening based on CSS, JavaScript does not know when it is finished.
  • Added an 800ms setTimeout() call to wait for your CSS animation to finish before emptying .portal-sub-menu
  • Removed unnecessary .promise().done(...) call.

Hope this helps!

Upvotes: 1

Milind Anantwar
Milind Anantwar

Reputation: 82241

It did not worked because $('.portal-sub-menu').empty(); was not getting called.Try this:

$('.portal-sub-menu .back').on('click', function(){
        $('.portal-menu').removeClass('slide')
        $('.portal-sub-menu').empty();
        return false;
    });    

Demo

Upvotes: 0

Related Questions