Я пытаюсь создать пользовательский интерфейс панели мониторинга, где пользователи могут удалить определенные вещи с главной страницы, которые они не хотят видеть, и сохранить их через LocalStorage для использования в будущем.
По сути, У меня есть предварительно загруженный список в localstorage, содержащий все возможные элементы. Если пользователь щелкнет «X», чтобы удалить этот элемент, эта функция будет соответствовать приведенной ниже функции и удалит его из списка, а затем повторно сохраните обновленный список в localstorage. Элементы скрываются путем присоединения класса bootstrap d-none к целевым элементам.
Проблема, с которой я столкнулся, заключается в том, что, хотя элементы могут быть успешно удалены и сохранены, я не могу найти решение pu sh все еще видимые до самого верха, если все вышеперечисленное удаляется. Элементы находятся в одном ряду, но разные 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'));
};
