修改删除内容

旧城等待， 2022-08-28 08:57 116阅读 0赞

**    1. 点击添加 弹出对话框 点击确定按钮 往ul中追加一个li 内容+修改+删除**

**    2. 给ul添加点击事件 实现事件委托 获取触发源的内容**

**        判断内容如果是修改 弹出对话框 点击确定按钮的时候 修改内容**

**        判断内容如果是删除 直接删除整个li**

**css:**

<style>
            * {
                padding: 0;
                margin: 0;
                list-style: none;
            }
    
            .wrap {
                width: 300px;
                margin: 10px auto;
                text-align: center;
            }
    
            li {
                border-bottom: 2px solid red;
                margin-top: 5px;
                padding: 5px;
                height: 30px;
                line-height: 30px;
            }
    
            ul li span {
                float: left;
            }
    
            button {
                width: 60px;
                height: 30px;
                outline: none;
                border: none;
                color: #fff;
            }
    
            .green {
                float: right;
                margin-right: 5px;
                background: green;
            }
    
            .red {
                float: right;
                background: red;
            }
    
            .add {
                margin-top: 20px;
                background-color: #999;
                color: #000;
            }
        </style>

**html:**

<div class="wrap">
            <ul>
                <li>
                    <span>列表1</span>
                    <button class="red">删除</button>
                    <button class="green">修改</button>
    
                </li>
                <li>
                    <span>列表2</span>
                    <button class="red">删除</button>
                    <button class="green">修改</button>
    
                </li>
                <li>
                    <span>列表3</span>
                    <button class="red">删除</button>
                    <button class="green">修改</button>
    
                </li>
                <li>
                    <span>列表4</span>
                    <button class="red">删除</button>
                    <button class="green">修改</button>
    
                </li>
            </ul>
            <button class="add">添加</button>
        </div>

**javascript:**

window.onload = function () {
        /* 
              1. 点击添加 弹出对话框 点击确定按钮 往ul中追加一个li 内容+修改+删除
              2. 给ul添加点击事件 实现事件委托 获取触发源的内容
                  判断内容如果是修改 弹出对话框 点击确定按钮的时候 修改内容
                  判断内容如果是删除 直接删除整个li
        */
        // 1.获取元素
        var ul = document.querySelector('ul');
        var add = document.querySelector('.add');
        console.log(ul,add);
        // 2.点击添加
        add.onclick = function () {
            // 3.弹出对话框
            var txt = prompt('请输入内容');
            // 4.创建一个li
            var li = document.createElement('li');
            li.innerHTML = '<span>' + txt + '</span>' + ' <button class="red">删除</button>' + ' <button class="green">修改</button>';
            // 5. 往ul中追加
            ul.appendChild(li);
        };
        // 6.给ul添加点击事件 实现事件委托 获取触发源的内容
        ul.onclick = function () {
            // 7.获取触发源的内容
            var tar = event.target || event.srcElement;
            console.log(tar.innerHTML);
            // 9.获取它上上一个兄弟
            var b = tar.previousElementSibling.previousElementSibling || tar.previousSibling.previousSibling;
            console.log(b);
            // 8.判断内容如果是修改 弹出对话框 点击确定按钮的时候 修改内容
            if (tar.innerHTML == '修改') {
                // 10.弹出对话框 点击确定按钮的时候 修改内容
                var a = prompt('请输入内容')
                b.innerHTML = a;
                // 11.判断内容如果是删除 直接删除整个li
            } else if (tar.innerHTML == '删除') {
                // 12.直接删除整个li
                tar.parentNode.remove();
            }
        };
    };

**效果： **

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 3][]

![watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 4][]

[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16]: /images/20220828/54624a80a2144a3f8216a2a589cb9bec.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 1]: /images/20220828/66498d45d9b84a8c9058c0a842c41280.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 2]: /images/20220828/21025c34410a4530a5817daf2e27b6a7.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 3]: /images/20220828/3248b344596b4a5c91684d7fa88b29ce.png
[watermark_type_ZHJvaWRzYW5zZmFsbGJhY2s_shadow_50_text_Q1NETiBA5pif5bG_SA_size_20_color_FFFFFF_t_70_g_se_x_16 4]: /images/20220828/e29cdfa50bc2451895958ccc6db7147b.png

发表评论取消回复

表情：

评论列表（有 0 条评论，116人围观）

还没有评论，来说两句吧...

相关阅读

相关 JavaScript文档内容修改

插入子元素 <h1>这是标题1</h1> <h1>这是标题2</h1> <h1 class="biaoti3">这是标题3</h1> ...

末蓝、/ 2024年04月17日 19:58/ 0 赞/ 22 阅读

相关修改删除内容

1. 点击添加弹出对话框点击确定按钮往ul中追加一个li 内容+修改+删除 2. 给ul添加点击事件实现事件委托获取触发源的内容

旧城等待，/ 2022年08月28日 08:57/ 0 赞/ 117 阅读

相关 git 创建、提交代码仓库，查看修改内容、撤销修改内容

上一节已经使用命令登陆了git，现在可以创建、提交代码仓库了。 1、创建代码仓库：使用cd进入到要创建代码仓库的目标文件夹，使用git init创建代码仓库； cd

朴灿烈づ我的快乐病毒、/ 2022年08月23日 04:59/ 0 赞/ 164 阅读

相关 PHP 修改和删除XML内容的原理和方法

![示例][20161022152100857] 例如： example.xml <?xml version="1.0" encoding="utf-8"?>

旧城等待，/ 2022年07月15日 17:38/ 0 赞/ 129 阅读

相关 python修改文件内容

1 替换文件中的一行 1.1 修改原文件 1 要把文件中的一行Server=192.168.22.22中的IP地址替换掉，因此把整行替换。 data =

超、凢脫俗/ 2022年07月14日 17:49/ 0 赞/ 147 阅读

相关修改和删除

转自:https://www.shiyanlou.com/courses/running 修改和删除一、实验介绍 1.1 实验内容本节实验

女爷i/ 2022年06月06日 08:52/ 0 赞/ 166 阅读

相关 NodeJS博客实战19_博客内容修改和删除

源码地址：[https://github.com/RidingACodeToStray/Nodejs\_blog][https_github.com_RidingACodeTo

ゝ一纸荒年。/ 2022年05月27日 08:12/ 0 赞/ 219 阅读

相关 linux 删除文件内容

$ : > filename $ > filename $ echo "" > filename $ echo > filename $ cat /

怼烎@/ 2022年05月24日 00:18/ 0 赞/ 165 阅读

相关 js中增加标签删除标签和input修改获取内容

1、增加标签创建标签：document.createElement('标签id名') 在某一标签内的最后面插入标签：c.appendChild（b)； //即给c加

拼搏现实的明天。/ 2022年04月23日 04:26/ 0 赞/ 308 阅读

相关 Vue修改时，撤销修改内容

原文地址：[https://forum.vuejs.org/t/topic/37424][https_forum.vuejs.org_t_topic_37424] ![wa

￡神魔★判官ぃ/ 2021年09月17日 00:26/ 0 赞/ 659 阅读