JavaScript 设置列表选项(li)可删除

下实例我们演示了如何使用 JavaScript 来关闭列表选项：

HTML 代码

<ul>

<li>Adele</li>

<li>Agnesx</li>

<li>Billyx</li>

<li>Calvinx</li>

<li>Christinax</li>

<li>Cindy</li>

</ul>

CSS 代码

* {

box-sizing: border-box;

}

TML ul li 横排居中排列的方法，三步骤及实例

ul li 横排居中排列的方法

无序列表的列表项默认情况下是竖着排的，因为li元素是块级元素，会自动分行。那如果要将列表的列表项进行横排，比用无序列表ul元素定义一个导航条。那该怎么办呢？这当中有三个应当被解决的东西，一个是横排本身，另一个就是应当把无序列表项的圆点去掉，第三则是让ul定义的列表居中显示，包括水平居中和垂直居中。方法如下：

HTML ul li 横排居中排列的方法，三步骤及实例

ul li横排的方法

将ul无序列表元素中的列表项li元素的display属性设置成inline或inline-block，个人比较常用的是后者：

ul li{display:inline-block;}

ul水平居中和垂直居中的方法

水平居中方法：只要将ul元素包含于一个div元素，并将div元素的text-align属性设置为center即可将ul水平居中。除此之外，因为ul的列表默认情况下是有左内边距的，所以，为了能够让列表能够更好地水平居中，需要将ul的左内边距padding-left设置为0，具体可见下方的综合实例。

垂直居中方法：为包含ul元素的div元素设置宽度width和高度height（实际上导航条一般也需要有宽度和高度的设置），然后将ul的line-height属性设置为父元素的高度height即可。

去掉圆点的方法

将ul元素的list-style属性设置为none即可。

HTML ul li 横排居中排列的方法，三步骤及实例

ul li 横排居中排列综合实例代码，及在线编辑器

<div class='e1'>
  <ul class='e2'>
    <li>HTML</li>
    <li>python</li>
    <li>golang</li>
  </ul>
</div>

<style>
  .e1{width:100%;height:50px;border:1px solid skyblue;text-align:center;}
  .e2{list-style:none;padding-left:0%;}
  .e2 li{line-height:50px;display:inline-block;}
</style>

HTML+CSS+JS实例在线编辑器：

HTML ul li 横排居中排列的方法，综合实例在线 - HTML教程

实例代码解析

如上代码，一定要将ul的左内边距padding-left设置为0，否则ul列表的“水平居中”将偏向右边，大家可以将.e2中的padding-left删除掉，然后再在线运行看一看效果。

python全栈：

笨鸟工具-璞玉天成，大器晚成

节我们学习如何使用 jQuery 中的方法来添加和删除 HTML 元素。

jQuery 中用于添加 HTML 元素的方法有如下几种：

方法	描述
append()	在所选元素的末尾插入内容
prepend()	在选定元素的开头插入内容
after()	在选定元素后插入内容
before()	在选定元素之前插入内容

而用于删除元素的方法有：

方法	描述
remove()	删除被选元素容，包括子元素
empty()	删除被选元素的所有子节点和内容

append()方法

append() 方法可以在指定元素的末尾插入内容。

语法如下：

$(selector).append(content,function(index,html))

content：规定要插入的内容，可以包含 HTML 元素、jQuery 对象、DOM 元素。
function(index,html)：规定返回待插入内容的函数，index 为集合中元素的索引位置，html 为被选元素的当前 HTML。

示例：

我们来看下面这个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").append("侠课岛");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>点击追加文本</button>
</body>
</html>

点击按钮，在指定的 标签末尾添加文本内容 “侠课岛”，我们可以在浏览器中看一下演示结果：

除了文本内容，我们还可以在元素中添加 HTML ：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("ul").append("<li>strawberry</li>");
    });
  });
</script>
</head>
<body>
  <ul>
    <li>apple</li>
    <li>pear</li>
    <li>peach</li>
    <li>watermelon</li>
  </ul>
  <button>点击追加文本</button>
</body>
</html>

在浏览器中的演示结果：

prepend()方法

prepend() 方法其实和 append() 方法类似，语法也差不多。但是 prepend() 方法主要用于在被选元素的开头插入指定内容。

语法如下：

$(selector).prepend(content,function(index,html))

示例：

我们将上述示例中的 append() 方法改成 prepend() 方法：

$(function(){
    $("button").click(function(){
      $("ul").prepend("<li>strawberry</li>");
    });
});

然后看一下在浏览器中的演示结果：

after()方法

after() 方法用于在被选元素后插入指定的内容。看起来 after() 方法和 append() 方法的作用好像差不多，但是其实两个方法还是有区别的。 append() 方法是在被选元素的结尾插入内容，插入的内容仍然在元素内部。而 after() 插入的内容会重新起一行，与被选择的元素并没有什么逻辑上的联系。

示例：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").after("<p>侠课岛</p>");
    });
  });
</script>
</head>
<body>
  <p>你好，我的名字叫做：</p>
  <button>点击追加文本</button>
</body>
</html>

在浏览器中的演示效果：

before()方法

before() 方法用于在被选元素之前插入指定的内容。它和 prepend() 方法的区别在于一个在被选元素内插入内容，一个在被选元素外。

注意 before() 方法和 after() 方法都是在被选元素外插入内容。append() 和 prepend() 方法都是在被选元素内插入内容。

示例：

例如将上述示例中的方法改为 before：

$(function(){
    $("button").click(function(){
      $("p").before("<p>侠课岛</p>");
    });
});

在浏览器中的演示效果：

remove()方法

remove() 方法用于删除被选元素及其子元素。该方法也会删除被选元素的数据和事件。

示例：

例如下面这个例子：

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>jQuery_侠课岛(9xkd.com)</title>
<script src="jquery-3.5.1.min.js"></script>
<script>
  $(function(){
    $("button").click(function(){
      $("p").remove();
    });
  });
</script>
</head>
<body>
  <p>你好，欢迎来到侠课岛！</p>
  <button>点击删除</button>
</body>
</html>

在浏览器中的演示效果：

从上图中可以看到，remove() 方法将指定的 p 元素连标签带元素全部删除。

empty()方法

empty() 方法用于删除被选元素的所有子节点和内容。该方法不会移除元素本身，或它的属性。

示例：

我们讲上述示例中的 remove() 方法改为empty() 方法，看看有什么不同：

$(function(){
    $("button").click(function(){
      $("p").empty();
    });
});

在浏览器中的演示效果：

可以看到 empty() 方法只会删除指定元素中的内容，不会删除元素本身，当然如果元素上有属性，属性也不会被删除，大家可以自己试一下。

在线咨询

上一篇：HTML DOM td/th 对象
下一篇：html前端开发工程师求职简历模板优质范文

您的项目需求

*请认真填写需求信息，我们会在24小时内与您取得联系。

整合营销服务商

JavaScript 设置列表选项(li)可删除

ul li 横排居中排列的方法

ul li横排的方法

ul水平居中和垂直居中的方法

去掉圆点的方法

ul li 横排居中排列综合实例代码，及在线编辑器

HTML+CSS+JS实例在线编辑器：

实例代码解析

python全栈：

append()方法

示例：

prepend()方法

示例：

after()方法

示例：

before()方法

示例：

remove()方法

示例：

empty()方法

示例：

您的项目需求