js实现列表的新增与删除

最新推荐文章于 2024-04-07 13:49:05 发布

看到代码头都是大的

最新推荐文章于 2024-04-07 13:49:05 发布

阅读量849

点赞数

本文链接：https://blog.csdn.net/ym5209999/article/details/111909900

版权

实现效果如下：

效果说明：

1、在爱好分类中选择自己的爱好，点击“已完成选择”，将选中的爱好添加至“我的爱好”列表中；
2、在我的爱好列表中，点击爱好后面的“x”，将爱好移除，实时记录当前我的爱好中的数据。

代码如下：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>js实现列表的新增与删除</title>
</head>
<style>
    * {
        padding: 0;
        margin: 0;
        list-style: none;
    }

    .box {
        width: 800px;
        height: 500px;
        border: 1px solid #8a6de9;
        margin: 20px auto;
    }

    .list {
        width: 100%;
        height: calc(120px - 1px);
        border-bottom: 1px solid #3F536E;
    }

    .list > ul > .likes {
        float: left;
        background: #cccccc;
        padding: 3px 5px;
        margin-left: 5px;
        margin-top: 5px;
    }

    .list > ul > .likes > span {
        color: #bbbbbb;
    }

    .connect {
        width: 100%;
        height: calc(100% - 170px);
    }

    .connect > ul {
        margin-left: 5px;
    }

    .connect > ul > li {
        line-height: 30px;
    }

    .connect > ul > li > input {
        margin-left: 10px;
    }

    .submit {
        width: 100%;
        height: 50px;
        border-top: 1px solid #3F536E;
    }

    .submit > input {
        border: none;
        width: 100%;
        font-size: 24px;
        color: #0e7af4;
        height: calc(100% - 1px);
        outline: none;
        background: none;
    }
</style>
<body>
<div class="box">
    <div class="list">
        我的爱好：
        <ul id="likesList">
        </ul>
    </div>

    <div class="connect">
        <ul id="connect">
            <li>
                运动类：
                <input type="checkbox" title="" value="篮球"> 篮球
                <input type="checkbox" title="" value="羽毛球"> 羽毛球
                <input type="checkbox" title="" value="兵乓球"> 兵乓球
                <input type="checkbox" title="" value="足球"> 足球
                <input type="checkbox" title="" value="滑板"> 滑板
                <input type="checkbox" title="" value="滑旱冰"> 滑旱冰
                <input type="checkbox" title="" value="跑步"> 跑步
                <input type="checkbox" title="" value="跳绳"> 跳绳
                <input type="checkbox" title="" value="举重"> 举重
            </li>

            <li>
                娱乐类：
                <input type="checkbox" title="" value="听音乐"> 听音乐
                <input type="checkbox" title="" value="看电影"> 看电影
                <input type="checkbox" title="" value="绘画"> 绘画
                <input type="checkbox" title="" value="写小说"> 写小说
                <input type="checkbox" title="" value="看书"> 看书

            </li>


            <li>
                乐器类：
                <input type="checkbox" title="" value="弹吉他"> 弹吉他
                <input type="checkbox" title="" value="钢琴"> 钢琴
                <input type="checkbox" title="" value="萨克斯"> 萨克斯
                <input type="checkbox" title="" value="葫芦丝"> 葫芦丝
                <input type="checkbox" title="" value="大号"> 大号
                <input type="checkbox" title="" value="小号"> 小号
            </li>

        </ul>
    </div>
    <div class="submit"><input type="submit" id="submit" value="已选择完成"></div>
</div>
<script>
    let input = document.getElementsByTagName("input"); // 获取所有类别爱好
    let submit = document.getElementById('submit'); //  底部按钮
    let likesList = document.getElementById('likesList'); // 添加信息至爱好列表
    let arr = []; // 初始化爱好列表
    let arr1 = [];  //  备份处理爱好列表
    let src = "";   //  爱好进行展示
    let closeLike = ""; //  删除的列表

    /* 点击提交按钮，将选择的信息，提交至“我的爱好列表中” */
    submit.onclick = function () {
        for (let i = 0; i < input.length - 1; i++) {
            if (input[i].checked === true) {
                arr.push(input[i].value)
            }
            input[i].checked = false;
        }

        for (let j = 0; j < arr.length; j++) {
            src += '<li class="likes">' + arr[j] + ' <span> x </span></li>';
            arr1.push(arr[j]);
        }
        likesList.innerHTML = src;
        fun_closeLike();
        arr = [];
        src = '';
    };

    /* 点击“我的爱好”里面的“x”，删除显示内容 */
    let likes = document.getElementsByClassName('likes');

    function fun_closeLike() {
        for (let k = 0; k < likes.length; k++) {
            likes[k].childNodes[1].onclick = function () {
                closeLike = likesList.childNodes[k].childNodes[0].data;
                this.parentNode.style.display = "none";
                let sr = this.parentNode.textContent;   // 获取列表中删除的内容
                let sr1 = sr.replace(/\s*/g, "");   //  去除内容中的空格
                let sr2 = sr1.replace(/x/, ""); //  去除内容中的“x”
                let index = arr1.indexOf(sr2);    //  获取删除元素的下标
                arr1.splice(index, 1);  //  在数组中去除该下标的元素
                console.log(arr1);  //  获取最终显示的爱好列表
            }
        }
    }

</script>

</body>
</html>