使用getElementsByClassName獲取元素後直接使用addEventListener，可能不起作用，原因是getElementsByClassName取得的可能是元素數組。解決的辦法是使用循環語句。
document.getElementsByClassName(...)捕捉到的是該類名元素的數組
正確的訪問方式應該是：
document.getElementsByClassName(...)[0].addEventListener...
使用遍歷為每個class添加監聽：
var classObj = document.getElementsByClassName(...);
for(i=0;i
classObj[i].addEventListener...
}
下面舉一個例子。
http://hovertree.com/texiao/mobile/8/
<ul class="hovertreelist-ul">
<li id="li" class="hovertreelist-li">
<div class="con">
何問起，你的快遞到了，請到樓下簽收<a href="http://hovertree.com/">詳情</a>
</div>
<div class="hovertreebtn">刪除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
哇，你在干嘛，快點來啊就等你了
</div>
<div class="hovertreebtn">刪除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
何問起發給你一個節日紅包，<a href="http://hovertree.com/wx/hwq/6/">點這裡查收</a>
</div>
<div class="hovertreebtn">刪除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
<a href="http://hovertree.com/hovertreescj/">何問起收藏夾</a>歡迎您的使用。
</div>
<div class="hovertreebtn">刪除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
<a href="http://hovertree.com/h/bjaf/jtkqnsc1.htm">CSS3</a>繪制各種各樣的圖形圖標
</div>
<div class="hovertreebtn">刪除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
何問起發給你一個節日紅包，請注意查收。
</div>
<div class="hovertreebtn">刪除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
<a href="http://hovertree.com/menu/bootstrap/">Bootstrap</a>十分實用，大大提高效率。
</div>
<div class="hovertreebtn">刪除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
何問起你有一個到付快遞，請到門口查收。
</div>
<div class="hovertreebtn">刪除</div>
</li>
<li class="hovertreelist-li">
<div class="con">
給你寄來了一張賀卡，請到門口查收。
</div>
<div class="hovertreebtn">刪除</div>
</li>
</ul>
<script>
var hovertreeItems = document.getElementsByClassName("hovertreebtn");
var h_count = hovertreeItems.length;
for(var i=0;i<h_count;i++)
{
hovertreeItems[i].addEventListener('click', function (event) {
var hovertreeitem = event.target.parentNode;
hovertreeitem.style.display = 'none';
})
}
</script>