使用RemoveChild()和appendChild()实现筛选时的DOM元素恢复问题

问题根源 #

你遇到的核心问题是：

• querySelectorAll返回的是静态NodeList，当你调用elem.parentNode.removeChild(elem)后，元素脱离DOM树，下次遍历尝试elem.parentNode.appendChild(elem)时，elem.parentNode已变为null，无法执行添加操作。
• 你没有保存被移除元素的目标父容器引用，导致无法将它们重新插入DOM。

方案1：仅通过CSS类控制显示（推荐） #

不需要移除DOM，完全依靠.hide类的CSS规则控制元素显示隐藏，逻辑更简洁，也不会出现DOM操作的问题：

const filterBox = document.querySelectorAll('.js-article');

document.querySelector('.js-filter-list').addEventListener('click', (event) => {
    if (event.target.tagName !== 'BUTTON') return;
    const filterClass = event.target.dataset.filter;

    filterBox.forEach(elem => {
        elem.classList.remove('hide');
        if (filterClass !== 'all' && !elem.classList.contains(filterClass)) {
            elem.classList.add('hide');
        }
    });

    // 可选：切换按钮激活状态
    document.querySelectorAll('.js-filter-item').forEach(btn => btn.classList.remove('is-active'));
    event.target.classList.add('is-active');
});

对应的CSS规则：

.hide {
    display: none;
}

方案2：移除/重新插入DOM（满足你的需求） #

如果必须将不符合条件的元素从DOM中移除，需要先缓存所有元素并保存父容器引用，每次筛选时清空父容器，再插入符合条件的元素：

// 缓存所有文章元素并转为数组
const allArticles = Array.from(document.querySelectorAll('.js-article'));
// 获取文章的统一父容器
const articlesContainer = allArticles[0]?.parentNode;

document.querySelector('.js-filter-list').addEventListener('click', (event) => {
    if (event.target.tagName !== 'BUTTON') return;
    const filterClass = event.target.dataset.filter;

    // 清空父容器
    articlesContainer.innerHTML = '';

    // 筛选符合条件的元素
    const filteredArticles = filterClass === 'all' 
        ? allArticles 
        : allArticles.filter(elem => elem.classList.contains(filterClass));

    // 将符合条件的元素添加回DOM
    filteredArticles.forEach(elem => {
        elem.classList.remove('hide');
        articlesContainer.appendChild(elem);
    });

    // 可选：切换按钮激活状态
    document.querySelectorAll('.js-filter-item').forEach(btn => btn.classList.remove('is-active'));
    event.target.classList.add('is-active');
});

内容的提问来源于stack exchange，提问作者Mathieu Préaud