为何display:none未生效？如何隐藏ID以_event_1或_event_2结尾的区块

针对你遇到的两个前端问题，我来一步步帮你拆解和解决：

一、先修正「隐藏ID以_event_1或_event_2结尾的区块」的逻辑错误 #

你当前代码里用id.includes('event_1')的逻辑会匹配任何包含该字符串的ID（比如history_row_abc_event_1_xxx也会被误选中），但你需要的是严格以这两个字符串结尾的ID，这是核心逻辑偏差。

推荐直接使用CSS属性选择器来精准匹配，比循环判断更高效且准确：

• [id$="_event_1"]：匹配ID以_event_1结尾的元素
• [id$="_event_2"]：匹配ID以_event_2结尾的元素

二、「display:none样式未生效」的可能原因与解决办法 #

1. 样式优先级被覆盖：如果目标元素的CSS类里存在display: block !important这类规则，直接设置内联style.display会被优先级更高的样式覆盖
2. 元素选择错误：之前的includes逻辑可能选中了非目标元素，或者根本没定位到正确的元素
3. 其他JS代码干扰：页面中可能有其他脚本在后续重新设置了元素的display属性

优化后的完整代码 #

// 获取tab容器（用querySelector更现代，直接返回单个元素而非集合）
const tabMyMarketHistory = document.querySelector(".market_tab_well_tabs");
// 创建Clear按钮元素
const clearBtn = document.createElement('a');
const btnSpan = document.createElement('span');

clearBtn.id = "displayNoneListingCanceledCreated";
clearBtn.className = "market_tab_well_tab";
btnSpan.className = "market_tab_well_tab_contents";
btnSpan.textContent = "Clear";

clearBtn.appendChild(btnSpan);
tabMyMarketHistory.appendChild(clearBtn);

// 绑定点击事件（用addEventListener比onclick更灵活，支持多事件绑定）
clearBtn.addEventListener('click', function() {
    // 激活tab样式：用classList.add避免覆盖原有类
    this.classList.add("market_tab_well_tab_active");
    // 精准选中所有目标元素
    const targetItems = document.querySelectorAll('div[id$="_event_1"], div[id$="_event_2"]');
    
    targetItems.forEach(item => {
        // 先尝试直接设置内联样式
        item.style.display = 'none';
        
        // 如果内联样式无效，建议用CSS类强制隐藏（优先级更高）
        // item.classList.add('hidden');
        console.log('已处理元素:', item);
    });
});

备用方案：用CSS类强制隐藏 #

如果内联样式还是不生效，在你的CSS文件中添加一个高优先级的隐藏类：

.hidden {
    display: none !important;
}

然后在JS中替换为item.classList.add('hidden')即可确保样式生效。

额外排查建议 #

1. 打开浏览器控制台（F12），查看是否有「元素未找到」的报错，确认选择器是否正确定位到元素
2. 选中目标元素，查看Computed样式面板，确认display属性是否被其他CSS规则覆盖
3. 检查目标元素的ID是否确实严格以_event_1或_event_2结尾，有没有拼写错误

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