javascript练习：列表项目的增删

最新推荐文章于 2022-11-28 11:39:59 发布

Mortal__

最新推荐文章于 2022-11-28 11:39:59 发布

阅读量581

点赞数 2

文章标签： javascript html5 html css3 css

本文链接：https://blog.youkuaiyun.com/Mortal__/article/details/109632472

版权

这篇博客展示了如何使用JavaScript实现HTML列表项目的添加和删除功能。首先，介绍了实现效果的图片，接着详细讲解了HTML和CSS的基础结构及样式设置。最后，重点解析了JavaScript部分的代码逻辑，用于动态操作DOM元素。

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

效果图片：

基础结构与样式：HTML+Css部分

<!DOCTYPE html>
<html>

<head>
  <meta charset="UTF-8">
  <title>列表的增删和移动</title>
  <style>
    body {
      background: #ddd;
      text-align: center
    }

    .list {
      display: inline-block;
      margin-top: 20px;
      padding: 40px;
      border-radius: 8px;
      background: #fff;
      color: #333;
      text-align: left;
      font-size: 13px
    }

    .list-ul {
      list-style: none;
      margin: 0;
      padding: 0
    }

    .list-option {
      padding: