<ul class="pageList" id="pageList">
    <!--<li class="active">Page1<span class="page-delete"></span></li>-->
</ul>
<span id="addPage" class="addPage">Add</span>
* {
  margin: 0;
  padding: 0;
}
ul li {
  list-style: none;
}
.pageList, .addPage {
  width: 200px;
}
.pageList li {
  position: relative;
  width: 100%;
  height: 40px;
  margin-bottom: 5px;
  line-height: 40px;
  text-align: center;
  cursor: pointer;
  background: #f85455;
}
.pageList li.active, .pageList li:hover {
  background: #532122;
}
.pageList li:last-of-type {
  margin-bottom: 0;
}
.addPage {
  position: absolute;
  bottom: 0;
  left: 0;
  height: 50px;
  line-height: 50px;
  text-align: center;
  cursor: pointer;
  background: red;
}
.pageList li .page-delete {
  position: absolute;
  top: 5px;
  right: 0;
  width: 30px;
  height: 30px;
  background: url("http://www.dengzhr.com/wp-content/themes/dengzhr/images/icon_articleMenu_close.png") center center no-repeat;
}
$("#addPage").click(function() {
    // 刷新当前页列表
    function getCurrentPageCount() {
        return $("#pageList li").length;
    }
    
    // 添加列表项
    var pageListItemDeleteBtn = $("<span>").addClass("page-delete");
    var pageListItem = $("<li>").addClass("active").html("Page" + (getCurrentPageCount() + 1)).append(pageListItemDeleteBtn);
    $("#pageList").append(pageListItem);
});

$(".page-delete").click(deletePageListItem);

// 删除上级节点
function deletePageListItem() {
    $(this).parent().remove();
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. //cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js