修改删除内容

旧城等待， 2022-08-28 08:57 173阅读 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 条评论，173人围观）

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

相关阅读

相关 JavaScript文档内容修改

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

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

相关 ActiveMQBytesMessage内容修改

ActiveMQBytesMessage内容修改读写分离分析获得旧内容写入新内容结束输入读写分离分析

ゝ一纸荒年。/ 2023年02月13日 08:10/ 0 赞/ 13 阅读

相关修改删除内容

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

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

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

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

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

相关 python修改文件内容

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

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

相关修改和删除

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

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

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

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

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

相关 linux 删除文件内容

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

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

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

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

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

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

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

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