使用RemoveChild()和appendChild()过滤项目

Question

我正在用 Vanilla Javascript 和 CSS 构建一个简单的过滤器。

当用户点击某个类别时，与该类别不相关的文章具有类别

.hide

。我还需要从 DOM 中删除所有这些带有

.hide

类的文章，并在用户单击与它们相关的类别时再次附加它们。

过滤器可以很好地添加和删除类

.hide

。但问题是，隐藏的文章一旦被删除，就不会再出现了。

JS：

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

document.querySelector('.js-filter-list').addEventListener('click', (event) => {

    if (event.target.tagName !== 'BUTTON') return false;
    let filterClass = event.target.dataset['filter'];

    filterBox.forEach(elem => {
        elem.classList.remove('hide');
        elem.parentNode.appendChild(elem);

        if (!elem.classList.contains(filterClass) && filterClass !== 'all') {
            elem.classList.add('hide');
            elem.parentNode.removeChild(elem);
        }
    });

});

HTML：

<div class="c-filter__list js-filter-list">
    <button class="c-filter__list-item is-active js-filter-item" data-filter="all">All</button>
    <button class="c-filter__list-item o-font-title js-filter-item" data-filter="cat-1">Cat 1</button>
    <button class="c-filter__list-item o-font-title js-filter-item" data-filter="cat-2">Cat 2</button>
    <button class="c-filter__list-item o-font-title js-filter-item" data-filter="cat-3">Cat 3</button>
    <button class="c-filter__list-item o-font-title js-filter-item" data-filter="cat-4">Cat 4</button>
</div>

<article class="js-article" data-filter="cat-1"></article>
<article class="js-article" data-filter="cat-2"></article>
<article class="js-article" data-filter="cat-2 cat-3"></article>
<article class="js-article" data-filter="cat-1"></article>
<article class="js-article" data-filter="cat-4"></article>
<article class="js-article" data-filter="cat-3 cat-4"></article>
...

谢谢你。

Answer 1

不要使用removeChild，而是使用display: none