如何防止点击事件传播到父元素

Question

Can't really explain it so I made a jsfiddle but as you can see when you open the menu by clicking the toggleButton and you click the div removeBtn and that removes the item but the slide toggle is activated because of it...

I'm not using the conventional click slidetoggle because I'd like the mainMenu to close if the user clicks outside of the div...

Any idea why?

Answer 1

Use e.stopPropagation(); to prevent propagation of the click event :

$('#removeBtn').click(function(e) {
    e.stopPropagation();
    $(this).parent('div').remove();
});