简单小案例:点击删除列表中的物品

html:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width">
  <title>JS Bin</title>
</head>
<body>
<ul id="fu">
  <li><a href="#">apple</a></li>
  <li><a href="#">pear</a></li>
  <li><a href="#">mango</a></li>
  <li><a href="#">banana</a></li>
</ul>
</body>
</html>

css:

a{
  text-decoration:none;
  color:#fff;
}
*{
  padding:0;
  margin:0;
}
li{
 
  text-align:center;
  padding:10px;
  width:100px;
  list-style:none;
}
ul{
   background:#887;
   width:120px;
}
a:hover{
  color:#ffa;
}

这里写图片描述

js:

var fu=document.getElementById('fu');
if(fu.addEventListener){
  fu.addEventListener('click', ListDone,false);
}else{
  fu.attachEvent('onclick',ListDone);
}


function ListDone(e){
  var target=getTarget(e);
  var elParent=target.parentNode;
  var elGrandparent=target.parentNode.parentNode;
  elGrandparent.removeChild(elParent);
  if(e.preventDefault){
    e.preventDefault();
  }
  else{
    e.returnValue=false;
  }
  
}
function getTarget(e){
  if(!e){
    e=window.event;
  }
   return e.target||e.srcElement;
}

这里写图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值