先看效果：

就这个效果。当你点击右上角的删除按钮，会删除掉item1。

上代码：

  1.  <!DOCTYPE html>
  2.  <html>
  3.  
  4.  <head>
  5.      <meta charset="utf-8">
  6.      <title></title>
  7.      <style type="text/css">
  8.          .central {
  9.              /* 利用绝对定位和flex实现居中 */
  10.              position: absolute;
  11.              top: 0px;
  12.              right: 0px;
  13.              bottom: 0px;
  14.              left: 0px;
  15.              margin: auto;
  16.              width: 50%;
  17.              height: 80%;
  18.              background-color: antiquewhite;
  19.              /* 居中效果结束 */
  20.  
  21.              display: flex;
  22.              flex-direction: column;
  23.              /* 垂直排列 */
  24.              /* 与justify-content相同的方式在侧轴方向上将当前行上的弹性元素对齐。也就是上下居中 */
  25.              align-items: center;
  26.              /* 居中排列，水平方向 */
  27.              justify-content: center;
  28.          }
  29.  
  30.          #pop_div {
  31.              background-color: #F6F6F6;
  32.              width: 60px;
  33.              height: 60px;
  34.              border-radius: 30px;    /* 用边框半径实现圆形div */
  35.              text-align: center;
  36.              line-height: 60px;
  37.              outline: none;
  38.              font-size: 30px;
  39.              color: #C4C6C7;
  40.          }
  41.  
  42.          #pop_div:hover {
  43.              cursor: pointer;        /* 当鼠标移动到标签上是，自动变成手指形状 */
  44.          }
  45.  
  46.          .add_item {
  47.              background-color: #F6F6F6;
  48.              width: 60px;
  49.              height: 60px;
  50.              border-radius: 30px;
  51.              text-align: center;
  52.              line-height: 60px;
  53.              outline: none;
  54.              font-size: 10px;
  55.              color: #C4C6C7;
  56.          }
  57.  
  58.          .btn_delete {
  59.              position: relative;
  60.              float: right;
  61.              right: 0px;
  62.              top: 0px;
  63.              width: 20px;
  64.              height: 20px;
  65.              border-radius: 10px;
  66.              outline: none;
  67.              border: none;
  68.              cursor: pointer;
  69.          }
  70.  
  71.          .hide_div {
  72.              position: absolute;
  73.              top: 0px;
  74.              right: 0px;
  75.              bottom: 0px;
  76.              left: 0px;
  77.              margin: auto;
  78.              width: 100%;
  79.              height: 100%;
  80.  
  81.              display: none;  /* 显示方式：none（标签不显示） */
  82.              background-color: rgba(194, 195, 201, 0.7);     /* 实现半透明北京，0.7代表不透明度 */
  83.          }
  84.  
  85.          .hide_div div {
  86.              cursor: pointer;
  87.          }
  88.      </style>
  89.  </head>
  90.  
  91.  <body>
  92.      <div class="central">
  93.          <div id="panel"></div>
  94.          <div id="pop_div" title="添加" onclick="popDiv();">+</div>
  95.      </div>
  96.      <div id="hide_div" class="hide_div">
  97.          <div id="item1" onclick="itemClick('item1');">item1</div>
  98.          <div id="item2" onclick="itemClick('item2');">item2</div>
  99.          <div id="item3" onclick="itemClick('item3');">item3</div>
  100.          <div id="item4" onclick="itemClick('item4');">item4</div>
  101.          <div id="item5" onclick="itemClick('item5');">item5</div>
  102.      </div>
  103.      <script>
  104.          function popDiv() {
  105.              // alert("将要弹出一个div");
  106.              var vardiv = document.getElementById("hide_div");
  107.              vardiv.style.display = "flex";
  108.              vardiv.style.flexDirection = "column";
  109.              vardiv.style.justifyContent = "center";
  110.              vardiv.style.alignItems = "center";
  111.              // vardiv.onclick = itemClick;
  112.          }
  113.  
  114.          function itemClick(item) {
  115.              var text = document.getElementById(item).innerHTML; /* 获取元素html属性返回string */
  116.              // alert(text);
  117.              var vardiv = document.getElementById("hide_div");
  118.              vardiv.style.display = "none";
  119.              addElementToHtml(text);
  120.          }
  121.  
  122.          var index = 0;
  123.          function addElementToHtml(text) {
  124.              // 判断是否已经存在这个id的标签
  125.              if (null != document.getElementById(text + "_p")) {
  126.                  alert('不能重复添加...');
  127.                  return;
  128.              }
  129.  
  130.              // 创建一个p标签，设置属性
  131.              var p = document.createElement('p');
  132.              p.id = text + "_p";
  133.              p.innerHTML = text;
  134.              p.className = "add_item";
  135.  
  136.              // 创建一个input标签，设置属性
  137.              var btnDel = document.createElement('input');
  138.              btnDel.type = 'button';
  139.              btnDel.value = '×';
  140.              btnDel.title = "删除";
  141.              btnDel.className = "btn_delete";
  142.  
  143.              // 绑定删除按钮删除事件
  144.              btnDel.onclick = function () {
  145.                  // alert("将删除" + this.parentNode.id + "标签及子标签...");
  146.                  this.parentNode.parentNode.removeChild(this.parentNode); /* 首先要找到要删除节点的父节点，然后通过父节点才能删除自己 */
  147.              };
  148.  
  149.              // 添加删除按钮到p标签中
  150.              p.appendChild(btnDel);
  151.  
  152.              var panel = document.getElementById("panel");
  153.              panel.appendChild(p);
  154.          }
  155.      </script>
  156.  </body>
  157.  
  158.  </html>

web 给大家分享一个好玩的东西，也许你那块就用的到的更多相关文章

  1. C# PDF Page操作——设置页面切换按钮 C# 添加、读取Word脚注尾注 C#为什么不能像C/C++一样的支持函数只读传参 web 给大家分享一个好玩的东西，也许你那块就用的到

    C# PDF Page操作——设置页面切换按钮   概述 在以下示例中,将介绍在PDF文档页面设置页面切换按钮的方法.示例中将页面切换按钮的添加分为了两种情况,一种是设置按钮跳转到首页.下页.上页或者 ...

  2. 发现一个好玩的东西 Web Scraper

    是一个 Chrome 的扩展程序,机智的小爬虫

  3. 2. web前端开发分享-css,js进阶篇

    一,css进阶篇: 等css哪些事儿看了两三遍之后,需要对看过的知识综合应用,这时候需要大量的实践经验, 简单的想法:把qq首页全屏另存为jpg然后通过ps工具切图结合css转换成html,有无从下手 ...

  4. 分享一个刷网页PV的python小脚本

    下面分享一个小脚本,用来刷网页PV. [root@huanqiu ~]# cat www.py #!/usr/bin/python# coding: UTF-8import webbrowser as ...

  5. Git.Framework 框架随手记-- 分享一个"比较垃圾"的项目

    本文主要分享一个Git.Framework 开发的一个项目的部分源码,此项目代码"比较垃圾",所以请各位码农,码畜,码神,码圣勿喷!发此文只为记录工作问题以及分享问题! 一. 项目 ...

  6. 文件系统:介绍一个高大上的东西 - 零基础入门学习Python030

    文件系统:介绍一个高大上的东西 让编程改变世界 Change the world by program 接下来我们会介绍跟Python的文件相关的一些十分有用的模块.模块是什么?不知大家对以下代码还有 ...

  7. 分享一个c#写的开源分布式消息队列equeue

    分享一个c#写的开源分布式消息队列equeue 前言 equeue消息队列中的专业术语 Topic Queue Producer Consumer Consumer Group Broker 集群消费 ...

  8. 【开源.NET】 分享一个前后端分离的轻量级内容管理框架

    开发框架要考虑的面太多了:安全.稳定.性能.效率.扩展.整洁,还要经得起实践的考验,从零开发一个可用的框架,是很耗时费神的工作.网上很多开源的框架,为何还要自己开发?我是基于以下两点: 没找到合适的: ...

  9. [UWP]分享一个基于HSV色轮的调色板应用

    1. 前言 上一篇文章介绍了HSV色轮,这次分享一个基于HSV色轮的调色板应用,应用地址:ColorfulBox - Microsoft Store 2. 功能 ColorfulBox是Adobe 色 ...

随机推荐

  1. Selenium Webdriver——Chrome调试Xpath

    自己通过手写的Xpath要验证是否正确定位到元素,可以通过谷歌浏览器的Console功能(F12) 在console 输入:$x("") 定位去哪儿网的出发输入框: <inp ...

  2. Win10 安装 及应用遇到的问题

    IOS https://www.microsoft.com/zh-cn/software-download/techbench setup win10安装必须用administrator账号安装 在w ...

  3. 自动把\r\n 替换成<p></p>

    function nl2p($string, $line_breaks = true, $xml = true) { // Remove existing HTML formatting to avo ...

  4. 【转】dijkstra算法

    来自:https://blog.csdn.net/tw_345/article/details/50109375#comments 2015年11月30日 10:55:08 阅读数:1241 说到di ...

  5. Memcpy, blockcopy的进一步理解

    using System; using System.Runtime.InteropServices; using System.IO; namespace tx { struct ST { publ ...

  6. 理解C# 4 dynamic(4) – 让人惊艳的Clay(转)

    作者:Justrun名字来自<阿甘正传>,是希望自己能够更更傻一点. link: http://www.cnblogs.com/JustRun1983/p/3529157.html   理 ...

  7. LeetCode之链表

    2. Add Two Numbers You are given two linked lists representing two non-negative numbers. The digits ...

  8. 【读书笔记】《Python_Cookbook3》第一章：数据结构和算法

      Python提供了多样化有用的内建数据结构,例如列表.集合.字典.大多数时候,这些结构的使用比较简单,然后,一些关于搜索.排序.过滤的常见问题经常出现.本章节的目标是讨论常见的数据结构,以及涉及到 ...

  9. push和pop指令的使用

  10. Python 入门学习（贰）文件/文件夹正则表达式批量重命名工具

    基于 Udacity 的 Python 入门课程 Programming Foundations with Python 基于 Python 2.7 思路 Project 2 是一个去除文件名中所有数 ...