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;
}