自定义仪表板Javascript

Question

我正在尝试创建一个自定义的仪表板界面，用户可以在其中删除不想看到的某些内容，并通过LocalStorage将其存储起来以备将来使用。

基本上，我在localstorage中有一个预加载的列表，其中包含所有可能的元素，如果用户单击“ X”以删除该元素，则下面的此函数将匹配并将其从列表中删除，然后重新保存更新的列出到本地存储。通过将引导类'd-none'附加到目标元素来隐藏元素。

我遇到的问题是，尽管可以成功删除和保存元素，但是如果删除了上面的内容，我找不到找到将仍然可见的元素推到顶部的解决方案。元素在同一行中，但是col-6不同。

我附上了2张屏幕截图以帮助可视化。一种是删除了一半的元素，另一种是我作为网格进行布局的方式。

如您所见，当我删除3个元素时，仍可见的元素保留在其原始位置。有谁能解决这个问题？我知道“隐藏”元素仍然存在，这就是为什么我比动物之家拥有更多丑陋的空白空间的原因！

    //hideThis handles hiding cards by ID
    const hideThis = (id) => {
        //the element to hide
        let targetDiv = document.getElementById(id);
        //hide it
        targetDiv.classList.add('d-none');
        //for each of the to show elements
        for (let i = 0; i < elementsToShow.length; i++) {
            //if that element is equal to the target ID
            if (elementsToShow[i] === targetDiv.id) {
                // remove it
                elementsToShow.splice(i, 1);
                localStorage.setItem('shownElements', JSON.stringify(elementsToShow));
            }
        }
        console.log(elementsToShow);
        console.log(localStorage.getItem('shownElements'));
    };

Answer 1

这里的问题是，没有将d-none类添加到类[“ col-12”，“ col-md-6”]，而将d-none类添加到了内部。这些类[“ col-12”，“ col-md-6”]，并且这些类仍然在那里存在并占据空间。

要解决此问题，您可以做的是在javascript中使用最近的（）方法。

例如 target.closest（“ col-12”）。classList.add（“ d-none”）