Web网页设计：HTML+CSS+JavaScript大学生静态后台管理7个页面(带JS商品删除)
以下是一个简化的代码示例，展示了如何使用JavaScript在网页中删除一个商品。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品列表</title>
<style>
#productList {
width: 500px;
margin: 20px;
border: 1px solid #000;
padding: 10px;
}
.product {
padding: 10px;
margin-bottom: 5px;
border: 1px solid #000;
}
.product a {
float: right;
text-decoration: none;
color: red;
}
</style>
</head>
<body>
<div id="productList">
<div class="product">
商品A <a href="#" onclick="deleteProduct(event)">删除</a>
</div>
<div class="product">
商品B <a href="#" onclick="deleteProduct(event)">删除</a>
</div>
<!-- 其他商品列表项 -->
</div>
<script>
function deleteProduct(e) {
e.preventDefault(); // 阻止a标签默认行为（即不进行页面跳转）
const product = e.target.parentNode; // 获取a标签的父节点，即.product元素
product.parentNode.removeChild(product); // 从DOM中移除该商品节点
}
</script>
</body>
</html>这个示例中，我们定义了一个名为deleteProduct的函数，该函数将作为商品删除链接的点击事件处理函数。函数接收一个事件对象e，通过e.preventDefault()阻止链接默认行为，然后获取并删除触发事件的商品列表项。这是一个简单的示例，展示了如何在静态网页中添加交互性。
评论已关闭