點選刪除按鈕刪除當前行程式碼例項

antzone發表於2017-04-13
行程

本章節分享一段程式碼例項，它實現了點選刪除按鈕能夠刪除當前行效果。

刪除按鈕是css3實現了，可以參閱css3實現的叉號關閉刪除按鈕程式碼例項一章節。

程式碼例項如下:

[HTML] 純文字檢視 複製程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
.item {
  line-height: 50px;
  font-size: 20px;
  height: 50px;
  clear: both;
}
.item .text {
  display: inline-block;
  float: left;
}
.item:hover .close {
  display: inline-block;
}
.close {
  position: relative;
  display: none;
  width: 50px;
  height: 50px;
  overflow: hidden;
  border-radius: 25px;
  background: black;
  opacity: 0.5;
}
.close:hover {
  cursor: pointer;
  opacity: 1;
}
.close::before, .close::after {
  content: '';
  position: absolute;
  width: 80%;
  top: 50%;
  left: 10%;
  height: 12px;
  margin-top: -6px;
  border-radius: 5px;
  background: #ffffff;
}
.close::before {
  transform: rotate(45deg);
}
.close::after {
  transform: rotate(-45deg);
}
</style>
<script>
window.onload = function () {
  document.querySelector('#container').addEventListener('click', function (e) {
    if (e.target.className == 'close') {
      var p = e.target.parentNode;
      p.parentNode.removeChild(p);
    }
  })
}
</script>
</head>
<body>
  <div id="container">
    <div class="item">
      <span class="text">本站url地址是softwhy.com</span>
      <span class="close"></span>
    </div>
    <div class="item">
      <span class="text">只有努力奮鬥才會有美好的未來</span>
      <span class="close"></span>
    </div>
    <div class="item">
      <span class="text">沒有人一開始就是高手，必須努力奮鬥</span>
      <span class="close"></span>
    </div>
  </div>
</body>
</html>

上面的程式碼實現了我們的要求，下面介紹一下它的實現過程。

一.程式碼註釋:

（1）.window.onload = function () {}，當文件內容完全載入完畢再去執行函式中的程式碼。

（2）.document.querySelector('#container').addEventListener('click', function (e) {})，為id屬性值為container的元素註冊click事件處理函式，並沒有將事件處理函式直接註冊在刪除按鈕本身上，這是利用了事件冒泡效果。

（3）.if (e.target.className == 'close') {

  var p = e.target.parentNode;

  p.parentNode.removeChild(p);

}，如果事件源物件是刪除按鈕，也就是點選的刪除按鈕。

那麼就首先獲取此按鈕的父元素節點，在獲取此按鈕父元素節點的父節點。

最後刪除p元素節點。

二.相關閱讀:

（1）.querySelector()可以參閱querySelectorAll()一章節。

（2）.addEventListener()可以參閱javascript addEventListener()一章節。

（3）.e.target可以參閱javascript event.target一章節。

（4）.className可以參閱js className一章節。

（5）.parentNode可以參閱js parentNode一章節。

（6）.removeChild()可以參閱js removeChild()一章節。

（7）.事件冒泡可以參閱javascript事件冒泡簡單介紹一章節。

相關文章