使用原生JS检测所有子元素是否隐藏并隐藏父div

我来帮你搞定这个问题！你的核心需求是当某个.kb-items容器下的所有.kb-item都被隐藏时，把这个父容器也藏起来对吧？原代码的问题在于逻辑顺序不对——你是在遍历每个子元素的时候去统计全局的隐藏数量，这肯定没法精准对应到每个父容器。

修正后的实现代码 #

HTML（和你原来的一致，无需修改）

<div class="kb-items">
    <h1>fruits</h1>
    <div class="kb-item">apple</div>
    <div class="kb-item">banana</div>
</div>
<div class="kb-items">
    <h1>vegetables</h1>
    <div class="kb-item">lettuce</div>
    <div class="kb-item">onion</div>
    <div class="kb-item">carrot</div>
</div>
<!-- 假设你有一个输入框触发filter函数 -->
<input type="text" oninput="filter(this)" placeholder="搜索...">

JavaScript（核心逻辑重构）

function filter(e) {
    const searchKeyword = e.value.toLowerCase();
    
    // 遍历每个父容器，逐个处理
    document.querySelectorAll('.kb-items').forEach(function(container) {
        const childItems = container.querySelectorAll('.kb-item');
        let hiddenChildCount = 0;
        
        // 处理当前容器下的每个子元素
        childItems.forEach(function(item) {
            const itemText = item.innerText.toLowerCase();
            if (itemText.includes(searchKeyword)) {
                item.style.display = "block";
            } else {
                item.style.display = "none";
                hiddenChildCount++;
            }
        });
        
        // 判断是否要隐藏父容器：所有子元素都隐藏时才隐藏父容器
        container.style.display = hiddenChildCount === childItems.length ? "none" : "block";
    });
}

关键改进点说明 #

• 遍历对象调整：从遍历子元素改成遍历父容器，这样能针对每个容器单独统计它的子元素状态，避免全局统计的混乱
• 精准统计：每个容器内部单独计算隐藏的子元素数量，确保判断逻辑只作用于当前父容器
• 匹配逻辑优化：用includes()替代match()，对于简单的包含匹配场景，includes()更高效、语义更清晰
• 条件判断简化：用三元运算符精简父容器显示状态的判断代码，可读性更强

进阶优化：用CSS类控制显示隐藏 #

如果想让样式更易维护，推荐用CSS类替代直接修改style属性：

CSS

.hidden {
    display: none;
}

优化后的JavaScript

function filter(e) {
    const searchKeyword = e.value.toLowerCase();
    
    document.querySelectorAll('.kb-items').forEach(function(container) {
        const childItems = container.querySelectorAll('.kb-item');
        let hiddenChildCount = 0;
        
        childItems.forEach(function(item) {
            const itemText = item.innerText.toLowerCase();
            if (itemText.includes(searchKeyword)) {
                item.classList.remove('hidden');
            } else {
                item.classList.add('hidden');
                hiddenChildCount++;
            }
        });
        
        if (hiddenChildCount === childItems.length) {
            container.classList.add('hidden');
        } else {
            container.classList.remove('hidden');
        }
    });
}

这样做的好处是样式和逻辑分离，后续如果要修改隐藏的样式（比如改成opacity: 0或者添加过渡效果），只需要修改CSS即可，无需改动JS代码。

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