自定义仪表板 Javascript

Question

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

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

我遇到的问题是，虽然可以成功删除和保存元素，但如果删除了上面的内容，我找不到将仍然可见的元素推到顶部的解决方案。元素在同一行，但第 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")