<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");

            // 绑定事件
            pageListItemDeleteBtn.click(deletePageListItem);
            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