初步怀疑你的删除事件绑定有问题:新加入的DOM元素未绑定到事件。这种情况应该使用事件委派来做,你用 jQuery 吗?假设你的购物车列表的 HTML 结构如下:
<ul id="cartList"><li>
购物车商品1
<button>删除</button>
</li>
<li>
购物车商品2
<button>删除</button>
</li>
……
</ul>
则删除购物车商品的代码为(用了 jQuery):
$('#cartList').on('click', 'button', function() { // 委派 button 的点击事件$(this).parent().remove() // 移除购物车里当前商品
})
<!doctype html><html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0padding: 0}
#div_id p{width:80pxheight:30pxtext-align: leftborder: 1px solid #000line-height: 30px}
#div_id p button{float:rightheight:30px}
</style>
<script src = "js/tool.js"></script>
<script>
window.onload = function(){
var div = document.getElementById("div_id")
var button = document.getElementsByTagName("button")
for(var i = 0 i < button.length - 1 i++){
button[i].onclick = function(){
alert("加入购物车成功")
var p = document.createElement("p")
var pContent = document.createTextNode(this.innerHTML)
p.appendChild(pContent)
div.appendChild(p)
var delBtn = document.createElement("button")
var delBtnContent = document.createTextNode("x")
delBtn.appendChild(delBtnContent)
p.appendChild(delBtn)
delBtn.onclick = function(){
div.removeChild(p)
}
//setCookie("购物",div.innerHTML,getDate(100))
}
}
var isTrue = false
var button1 = document.getElementById("button_id")
button1.onclick = function(){
if(isTrue == false){
button1.innerHTML ="隐藏购物车"
isTrue = true
/*if(getCookie("购物") != undefined){
div.innerHTML = getCookie("购物")
}*/
div.style.display = "block"
}else if(isTrue){
button1.innerHTML ="显示购物车"
isTrue = false
div.style.display = "none"
/*if(getCookie("购物") != undefined){
div.innerHTML = getCookie("购物")
div.style.display = "none"
}*/
}
}
}
</script>
</head>
<body>
<button>商品1</button>
<button>商品2</button>
<button>商品3</button>
<button>商品4</button>
<button>商品5</button><br/><br/>
<button id = "button_id">显示购物车</button>
<div id = "div_id" style="display:none"></div>
</body>
</html>
欢迎分享,转载请注明来源:内存溢出
评论列表(0条)