jsjQuery中删除li

原创

mob64ca12d97dad 2024-09-05 04:20:06 ©著作权

文章标签 jQuery HTML html 文章分类 jQuery 前端开发

©著作权归作者所有：来自51CTO博客作者mob64ca12d97dad的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用 jQuery 删除 `<li>` 元素的指南

在网页开发中，有时我们需要动态地删除列表中的元素。使用 jQuery 这项库，可以轻松完成这个操作。本文将一步一步教会你如何在 jQuery 中删除 <li> 元素。

任务流程

下表展示了我们要完成这项任务的基本步骤：

步骤	描述
1	引入 jQuery 库
2	创建一个基础的 HTML 结构
3	编写 jQuery 代码，选择要删除的 `<li>`
4	使用 jQuery 的 `.remove()` 方法删除 `<li>`

步骤详解

步骤 1: 引入 jQuery 库

首先，我们需要在 HTML 文件中引入 jQuery 库。你可以从 jQuery 的官网直接引入，或使用 CDN。

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除 LI 示例</title>
    <!-- 引入 jQuery -->
    <script src="
</head>
<body>

步骤 2: 创建基础的 HTML 结构

接下来，我们需要创建一个简单的 HTML 结构，包括一个无序列表和一个删除按钮。

    <ul>
        <li>项目 1 <button class="delete-btn">删除</button></li>
        <li>项目 2 <button class="delete-btn">删除</button></li>
        <li>项目 3 <button class="delete-btn">删除</button></li>
    </ul>

步骤 3: 编写 jQuery 代码

加入以下 jQuery 代码，用于处理删除操作。我们会监听按钮的点击事件，当按钮被点击时，找到其父元素（即 <li>），并执行删除操作。

    <script>
        $(document).ready(function() {
            // 当用户点击删除按钮
            $('.delete-btn').on('click', function() {
                // 删除当前按钮所在的 li 元素
                $(this).parent().remove(); // 这里将删除对应的 <li>
            });
        });
    </script>

步骤 4: 完整 HTML 结构

将上述代码合并，形成一个完整的 HTML 文档：

</body>
</html>

完整代码示例

请看以下完整代码示例，整合之前的内容：

<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>删除 LI 示例</title>
    <script src="
</head>
<body>
    <ul>
        <li>项目 1 <button class="delete-btn">删除</button></li>
        <li>项目 2 <button class="delete-btn">删除</button></li>
        <li>项目 3 <button class="delete-btn">删除</button></li>
    </ul>

    <script>
        $(document).ready(function() {
            $('.delete-btn').on('click', function() {
                $(this).parent().remove(); // 删除对应的 <li>
            });
        });
    </script>
</body>
</html>

甘特图

接下来，我们用甘特图来展示完成这项任务的时间安排：

gantt
    title 项目计划
    dateFormat  YYYY-MM-DD
    section 准备阶段
    引入 jQuery          :a1, 2023-10-01, 1d
    创建 HTML 结构      :a2, 2023-10-02, 1d
    section 编码阶段
    编写 jQuery 代码    :a3, 2023-10-03, 1d
    测试功能            :a4, after a3, 1d