Reputation: 19435
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
Reputation: 3032
Here is a fixed JSFiddle:
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;
});
});
.done()
call - since your animation is happening based on CSS, JavaScript does not know when it is finished.setTimeout()
call to wait for your CSS animation to finish before emptying .portal-sub-menu
.promise().done(...)
call.Hope this helps!
Upvotes: 1
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;
});
Upvotes: 0