Не удалаются елементы с модального окна
Есть модальное окно. Представляет собой корзину в которой храняться продукты для покупки. Когда количество одного и того же продукта меняется, то както странно происходит - появлются дубликаты одного и тогоже modal-fixed-overlay__window-item, а надо чтобы при изменении количества продукта, если такой елемент в корзине уже есть, то простто менять количество, а если нет - добавить новый елемент. (Пока что полностью не готов сам modal-fixed-overlay__window-item, возникла проблема с этим отображением). Помогите пожалуйста, буду благодарен. Если нужны уточнения - уточню.
//modal-fixed-overlay__window-empty-list--active
//import { productAmount } from "../buy-page script/buy-page-script.js";
const modalWindow = document.querySelector('.modal-fixed-overlay');
const modalWindowInner = document.querySelector('.modal-fixed-overlay__window');
const openShopingListButton = document.querySelector('.header__menu-inner-item-link-shoping-list');
const closeShopingListButton = document.querySelector('.modal-fixed-overlay__window-head-exit-button');
const modalHeadText = document.querySelector('.modal-fixed-overlay__window-head-text');
const modalEmptyListTitle = document.querySelector('.modal-fixed-overlay__window-empty-list');
const testButton = document.querySelector('.add');
function removeAllItemsFromBasketWindow() {
for(let item of modalWindowInner.children) {
if (item.classList.contains('modal-fixed-overlay__window-item')) {
item.remove();
}
}
}
function renderProductDataItems(data) {
let pricePerOneProduct = 2500;
console.log(data);
data.map((item) => {
modalWindowInner.insertAdjacentHTML(
'beforeend',
`
<div class="modal-fixed-overlay__window-item">
<div class="modal-fixed-overlay__window-item-image-inner"><img src="./img/buy-page-img/watches/watch (1).png" alt="product icon" class="modal-fixed-overlay__window-item-image-inner-image"></div>
<div class="modal-fixed-overlay__window-item-product-info">
<div class="modal-fixed-overlay__window-item-product-info-name-delete-inner">
<a class="modal-fixed-overlay__window-item-product-info-name-delete-inner-name">0.4 TrackMate XE</a>
<button class="modal-fixed-overlay__window-item-product-info-name-delete-inner-delete-button"><img src="./img/global-img/modal-img/delete-product-from-list.png" alt="delete product" class="modal-fixed-overlay__window-item-product-info-name-delete-inner-delete-button-img"></button>
</div>
<p class="modal-fixed-overlay__window-item-product-info-price">2 500,00$</p>
<p class="modal-fixed-overlay__window-item-product-info-color">Колір: ${item.color}</p>
<div class="modal-fixed-overlay__window-item-product-info-add-sum">
<div class="modal-fixed-overlay__window-item-product-info-add-sum-add-product-amount">
<button class="modal-fixed-overlay__window-item-product-info-add-sum-add-product-amount-add-button add-amount">+</button>
<input type="number" class="modal-fixed-overlay__window-item-product-info-add-sum-add-product-amount-input" value="0">
<button class="modal-fixed-overlay__window-item-product-info-add-sum-add-product-amount-add-button minus-amount">-</button>
</div>
<p class="modal-fixed-overlay__window-item-product-info-add-sum-total-price">${item.amount * pricePerOneProduct},00$</p>
</div>
</div>
</div>
`
);
})
}
function loadProductDataFromLocalStorage() {
const productData = JSON.parse(localStorage.getItem('basketProductsData'));
if(productData) {
renderProductDataItems(productData);
} else {
modalEmptyListTitle.classList.add('modal-fixed-overlay__window-empty-list--active');
};
}
function closeShopingList() {
for(let item of modalWindowInner.children) {
if (item.classList.contains('modal-fixed-overlay__window-item')) {
item.remove();
}
}
modalWindow.classList.remove('modal-fixed-overlay--modal-active');
openShopingListButton.addEventListener('click', openShopingList);
closeShopingListButton.removeEventListener('click', closeShopingList);
}
function openShopingList() {
loadProductDataFromLocalStorage();
modalHeadText.textContent = `Кошик(0)`;
modalWindow.classList.add('modal-fixed-overlay--modal-active');
openShopingListButton.removeEventListener('click', openShopingList);
closeShopingListButton.addEventListener('click', closeShopingList);
}
// testButton.addEventListener('click', function () {
// modalWindowInner.insertAdjacentHTML('beforeend', shoppingItemHTML);
// });
export { openShopingListButton, openShopingList };