为何removeClass()不作用于内部元素？类可添加却无法删除

这个问题我太熟悉了——本质是DOM事件冒泡在搞鬼！

你看，.closeX是.menu的子元素，当你点击关闭按钮时，点击事件会沿着DOM树向上传递，最终触发父元素.menu的点击事件。这就导致一个尴尬的情况：刚执行完removeClass('openMenu')移除类，紧接着父元素的事件又把openMenu加回去了，看起来就像删除操作完全失效了。

下面给你几个靠谱的解决方案：

方案1：直接阻止事件冒泡 #

修改关闭按钮的点击事件，加上event.stopPropagation()来阻断事件向上传播：

$('.menu').click(function() { 
  $(this).addClass('openMenu') 
})
$('.closeX').click(function(event) { 
  event.stopPropagation(); // 阻止事件冒泡到父元素
  $('.menu').removeClass('openMenu') 
})

方案2：使用事件委托（更推荐动态场景） #

如果你的菜单或关闭按钮是动态生成的，事件委托会更稳定。我们把事件绑定到更高层级的元素（比如document），再通过目标元素判断来处理：

$(document).on('click', '.menu', function() {
  $(this).addClass('openMenu');
});

$(document).on('click', '.closeX', function(event) {
  event.stopPropagation();
  $('.menu').removeClass('openMenu');
});

方案3：在父元素事件中排除子元素触发 #

在.menu的点击事件里，判断点击的目标是不是关闭按钮或者它的子元素，如果是就不执行添加类的操作：

$('.menu').click(function(event) {
  // 检查点击目标是否属于.closeX元素
  if (!$(event.target).closest('.closeX').length) {
    $(this).addClass('openMenu');
  }
});

$('.closeX').click(function() {
  $('.menu').removeClass('openMenu');
});

核心思路就是打断“子元素点击触发父元素事件”的连锁反应，选哪个方案看你实际的代码场景就好~

内容的提问来源于stack exchange，提问作者Farid