自定义仪表板Javascript

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

基本上，我在localstorage中有一个预加载的列表，其中包含所有可能的元素，如果用户单击“X”删除该元素，下面的函数将匹配该元素并将其从列表中删除，然后将更新的列表重新保存到localstorage。通过将引导类“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'));
    };

//hideThis处理按ID隐藏卡的操作
常量hideThis=（id）=>{
//要隐藏的元素
设targetDiv=document.getElementById（id）；
//藏起来
targetDiv.classList.add（'d-none'）；
//对于要显示元素的每个
for（设i=0；i

---

这里的问题是，d-none类没有被添加到类[“col-12”、“col-md-6”]中，d-none类被添加到这些类[“col-12”、“col-md-6”]中的内部，而这些类仍然占据着空间

要解决这个问题，您可以使用javascript中最接近的（）方法

e、 g。

---

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

另一种替代解决方案是将id分配给包含“col-6 col-md-6”的div，然后尝试将类“d-none”添加到suhaib！这个解决方案奏效了！你是对的，我隐藏了卡本身，但不是它的父容器。中提琴！它起作用了！