按钮点击切换数组增删：Div中移除元素失效求助

先拆解你代码里的核心问题：

• 变量作用域错误：items数组和toggle变量被放在each循环内部，导致每个按钮都拥有独立的数组和开关状态，无法实现所有按钮共享同一数组的需求。
• 移除逻辑缺失DOM操作：当toggle切换为false时，你只执行了数组弹出，但没有同步从显示Div中移除对应的元素。
• toggle状态不可靠：单纯依赖布尔值切换，若出现意外触发（比如快速连续点击），很容易导致开关状态和实际数组、DOM内容不一致。

修正后的实现代码 #

// 把数组放在循环外部，作为所有按钮共享的状态容器
var items = [];
// 替换成你实际用来显示内容的Div选择器
var displayDiv = $('#target-display-div');

$("#button-list button").each(function(index) {
  $(this).on("click", function(){
    // 获取按钮对应的值，也可以用自定义data属性：$(this).data('item-value')
    var currentValue = $(this).text();
    // 检查当前值是否已在数组中
    var valuePosition = items.indexOf(currentValue);

    if(valuePosition === -1) {
      // 值不在数组中：添加进数组 + 渲染到DOM
      items.push(currentValue);
      // 给渲染的元素加标识，方便后续精准移除
      displayDiv.append('<span class="item-item" data-val="' + currentValue + '">' + currentValue + '</span>');
    } else {
      // 值已在数组中：从数组移除 + 删除对应DOM元素
      items.splice(valuePosition, 1);
      displayDiv.find('.item-item[data-val="' + currentValue + '"]').remove();
    }
  });
});

关键改进点 #

1. 共享状态管理：将items数组移到循环外部，确保所有按钮操作的是同一个数据集合。
2. 基于实际数据判断操作：不再依赖toggle布尔值，直接检查当前值是否存在于数组中，逻辑更健壮，避免状态错位。
3. DOM元素精准关联：给每个渲染到Div的元素添加data-val标识，移除时可以精准定位到对应元素，不会误删其他内容。
4. 完整的双向同步：添加时同步更新数组和DOM，移除时也同步执行两项操作，保证数据和视图完全一致。

如果你坚持想用toggle的方式实现，也可以调整，但需要确保每个按钮的toggle状态始终和数组、DOM状态匹配——不过相比之下，直接基于数组内容判断的方式更稳定，容错性更强。

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