Bootstrap列表添加、移除元素

最新推荐文章于 2022-02-19 19:40:05 发布

原创最新推荐文章于 2022-02-19 19:40:05 发布 · 3.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#Bootstrap列表 #添加删除列表元素

网页专栏收录该内容

6 篇文章

订阅专栏

本文介绍了一种使用jQuery在网页上操作列表的方法，包括在列表前添加元素和从列表末尾删除元素的功能实现。通过具体的HTML和JavaScript代码示例，展示了如何利用jQuery选择器和DOM操作方法完成这些任务。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

点击添加时在列表前边添加元素，点击删除时删除列表最后一项：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 基本的列表组</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script language=javascript>
function func(){
    //var nods = $("ul.list-group > li");
 var nods = $("#list > li");//获取列表的所有元素
    alert(nods.length);
 document.getElementById("list").removeChild(nods[nods.length - 1])
}
function func2(){
 document.getElementById("list").innerHTML = "<li class='list-group-item'>新添加的</li>" + document.getElementById("list").innerHTML;
}
</script>
</head>
<body>
<button type="button" onclick="func()" class="btn btn-default">删除</button>
 <br>
<button type="button" onclick="func2()" class="btn btn-default">添加</button>
 <br>

<ul class="list-group" id="list">
 <li class="list-group-item">免费域名注册</li>
 <li class="list-group-item">免费 Window 空间托管</li>
 <li class="list-group-item">图像的数量</li>
 <li class="list-group-item">24*7 支持</li>
 <li class="list-group-item">每年更新成本</li>
 <li class="list-group-item">免费域名注册</li>
</ul>


</body>
</html>

效果：
在这里插入图片描述
jQuery写法：

<!DOCTYPE html>
<html>
<head>
 <meta charset="utf-8"> 
 <title>Bootstrap 实例 - 基本的列表组</title>
 <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css">
 <script src="https://cdn.bootcss.com/jquery/2.1.1/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
 <script language=javascript>
 $(document).ready(function(){
  $("#del").click(function(){
   var nods = $("#list li:last");//选取id为list的最后一个li元素
   if(nods.length > 0)
    $("#list")[0].removeChild(nods[0]);//选取id为list的元素，删除
  });
  $("#add").click(function(){
   var li = document.createElement("li");
   li.innerHTML = "新添加的元素";
  　　li.setAttribute("class", "list-group-item");
   //方法一
   //$("#list")[0].insertBefore(li,$("#list li:first")[0]);
   //方法二
   $("#list").prepend(li);
  });
 });
 </script>
</head>
<body>
<button id="del" type="button" class="btn btn-default">删除</button>
 <br>
<button id="add" type="button" class="btn btn-default">添加</button>
 <br>

<ul class="list-group" id="list">
 <li class="list-group-item">免费域名注册</li>
 <li class="list-group-item">免费 Window 空间托管</li>
 <li class="list-group-item">图像的数量</li>
 <li class="list-group-item">24*7 支持</li>
 <li class="list-group-item">每年更新成本</li>
 <li class="list-group-item">免费域名注册</li>
</ul>


</body>
</html>