jQuery遗留项目开发过滤标签删除联动功能时报removeFilter未定义错误

ReferenceError: removeFilter is not defined的核心触发原因是作用域不匹配：

• 你将removeFilter函数定义在复选框change事件的回调函数内部，这个函数属于事件回调的局部闭包作用域，外部代码无法访问
• 动态拼接的过滤标签里使用的内联onclick="removeFilter(...)"，是在浏览器全局作用域下执行的，根本读取不到闭包内的局部函数，因此触发点击时就会抛出未定义的引用错误。

放弃内联onclick的写法，使用jQuery原生的事件委托机制绑定动态元素的删除逻辑，既解决作用域问题，也符合项目原有编码习惯，可完整实现“移除过滤标签+同步取消对应复选框勾选状态”的需求，参考实现代码如下：

var filtersApplied = [];
// 复选框勾选/取消逻辑（原有业务逻辑保留）
$('.ps-sidebar').on('change', 'input[type=checkbox]', function () {
  var me = $(this);
  if (me.prop('checked') === true) {
    filtersApplied.push(me.attr('data-filter-label'));
  } else {
    filtersApplied = filtersApplied.filter(function (filter) {
      return filter !== me.attr('data-filter-label');
    });
  }

  if (filtersApplied.length === 0) {
    $('.ps-plans__filters').hide();
    $('.ps-plans__filters-applied').html('');
  } else {
    $('.ps-plans__filters').show();
    var filtersAppliedHtml = '';
    filtersApplied.forEach(function (filter) {
      filtersAppliedHtml +=
        '<span class="ps-plans__filter" id="' +
        filter +
        '">' +
        filter +
        '<span class="remove" data-filter-value="' + filter + '">x</span></span>';
    });
    $('.ps-plans__filters-applied').html(filtersAppliedHtml);
  }
});

// 事件委托绑定删除逻辑，适配动态生成的DOM元素
$('.ps-plans__filters-applied').on('click', '.remove', function () {
  var $removeIcon = $(this);
  var targetFilterValue = $removeIcon.attr('data-filter-value');
  // 从已选过滤值数组中移除对应值
  filtersApplied = filtersApplied.filter(function (item) {
    return item !== targetFilterValue;
  });
  // 移除对应的过滤标签DOM元素
  $removeIcon.closest('.ps-plans__filter').remove();
  // 同步取消对应复选框的勾选状态，保持状态同步
  $('.ps-sidebar input[type=checkbox][data-filter-label="' + targetFilterValue + '"]').prop('checked', false);
  // 如果没有剩余过滤值，隐藏整个过滤展示容器
  if (filtersApplied.length === 0) {
    $('.ps-plans__filters').hide();
  }
});

若必须保留内联onclick写法，需要满足函数在全局作用域可访问的要求，将removeFilter直接挂载到window对象上，例如：

// 必须将函数定义在事件回调外部，挂载到全局对象
window.removeFilter = function(el, filter) {
  // 实现删除逻辑
}

这种写法会占用全局命名空间，大型项目中容易出现函数重名覆盖的问题，因此更推荐使用jQuery事件委托的实现方式，稳定性和可维护性更强。

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