删除购物车商品 js怎么写

删除购物车商品的JS代码可以通过以下几种方法实现：利用DOM操作、事件监听、数组操作等。其中，最常见的一种方法是通过点击事件监听器来触发删除操作。下面将详细描述其中一种方法，并给出完整示例代码。

一、初始化购物车数据

在实现删除操作之前，需要先初始化购物车的数据。可以将购物车商品的数据存储在一个数组中，并动态渲染到HTML页面上。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Shopping Cart</title>
</head>
<body>
    <div id="cart">
        <!-- 商品列表将渲染在这里 -->
    </div>
    <button id="addItem">Add Item</button>
    <script src="cart.js"></script>
</body>
</html>

二、渲染购物车商品

在JavaScript中，通过遍历购物车数组，将每个商品渲染到页面上。每个商品的HTML结构中包含一个删除按钮。

// cart.js
let cart = [
    { id: 1, name: 'Product 1', price: 10.00 },
    { id: 2, name: 'Product 2', price: 20.00 },
    { id: 3, name: 'Product 3', price: 30.00 }
];
function renderCart() {
    const cartContainer = document.getElementById('cart');
    cartContainer.innerHTML = '';
    cart.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'cart-item';
        itemDiv.innerHTML = `
            <span>${item.name} - $${item.price.toFixed(2)}</span>
            <button class="delete-btn" data-id="${item.id}">Delete</button>
        `;
        cartContainer.appendChild(itemDiv);
    });
}
renderCart();

三、添加删除商品功能

通过事件监听器监听删除按钮的点击事件，并根据按钮的data-id属性删除对应的商品。

// cart.js
document.getElementById('cart').addEventListener('click', function(event) {
    if (event.target.classList.contains('delete-btn')) {
        const itemId = parseInt(event.target.getAttribute('data-id'));
        cart = cart.filter(item => item.id !== itemId);
        renderCart();
    }
});

四、添加新商品

为了使购物车功能更加完善，可以添加一个按钮来增加新商品，并动态更新购物车列表。

// cart.js
document.getElementById('addItem').addEventListener('click', function() {
    const newItem = { id: Date.now(), name: `Product ${cart.length + 1}`, price: Math.random() * 100 };
    cart.push(newItem);
    renderCart();
});

五、优化代码结构

为了提高代码的可维护性和可读性，可以将代码结构进行优化。可以将渲染和删除操作封装成函数，并使用常量和变量存储一些重复使用的DOM元素。

// cart.js
const cartContainer = document.getElementById('cart');
const addItemBtn = document.getElementById('addItem');
function renderCart() {
    cartContainer.innerHTML = '';
    cart.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'cart-item';
        itemDiv.innerHTML = `
            <span>${item.name} - $${item.price.toFixed(2)}</span>
            <button class="delete-btn" data-id="${item.id}">Delete</button>
        `;
        cartContainer.appendChild(itemDiv);
    });
}
function deleteCartItem(event) {
    if (event.target.classList.contains('delete-btn')) {
        const itemId = parseInt(event.target.getAttribute('data-id'));
        cart = cart.filter(item => item.id !== itemId);
        renderCart();
    }
}
function addCartItem() {
    const newItem = { id: Date.now(), name: `Product ${cart.length + 1}`, price: Math.random() * 100 };
    cart.push(newItem);
    renderCart();
}
cartContainer.addEventListener('click', deleteCartItem);
addItemBtn.addEventListener('click', addCartItem);
renderCart();

六、使用本地存储

为了在页面刷新后保留购物车数据，可以使用浏览器的本地存储（localStorage）来保存和读取购物车数据。

// cart.js
const cartContainer = document.getElementById('cart');
const addItemBtn = document.getElementById('addItem');
let cart = JSON.parse(localStorage.getItem('cart')) || [];
function renderCart() {
    cartContainer.innerHTML = '';
    cart.forEach(item => {
        const itemDiv = document.createElement('div');
        itemDiv.className = 'cart-item';
        itemDiv.innerHTML = `
            <span>${item.name} - $${item.price.toFixed(2)}</span>
            <button class="delete-btn" data-id="${item.id}">Delete</button>
        `;
        cartContainer.appendChild(itemDiv);
    });
    localStorage.setItem('cart', JSON.stringify(cart));
}
function deleteCartItem(event) {
    if (event.target.classList.contains('delete-btn')) {
        const itemId = parseInt(event.target.getAttribute('data-id'));
        cart = cart.filter(item => item.id !== itemId);
        renderCart();
    }
}
function addCartItem() {
    const newItem = { id: Date.now(), name: `Product ${cart.length + 1}`, price: Math.random() * 100 };
    cart.push(newItem);
    renderCart();
}
cartContainer.addEventListener('click', deleteCartItem);
addItemBtn.addEventListener('click', addCartItem);
renderCart();

通过以上代码示例，可以实现一个简单的购物车商品删除功能。这个过程不仅展示了如何使用JavaScript操作DOM元素，还演示了如何使用事件监听器和数组操作来实现动态功能。在实际项目中，可以根据具体需求对代码进行进一步的优化和扩展，例如添加商品数量更新、总价计算等功能。