鼠标点击button添加div，点击对于button删除最后的一个元素。以此类推

本文链接：https://blog.youkuaiyun.com/weixin_46019220/article/details/112369031

本文介绍如何使用HTML、CSS和jQuery创建一个宽度和高度固定的父级元素，内容溢出时显示滚动条，同时实现点击添加文本框、上传图片的功能。详细步骤包括文本框的定制和图片上传的处理。

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

dome要点：
1、父级元素宽高固定，内容超出则显示滚动条；
2、点击添加时，新增加div；
3、图片上传（单张图）功能；
4、文本框使用textarea标签，并去除一些默认样式

<!DOCTYPE>
<html>
<head>
    <title>108</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/2.2.4/jquery.min.js"></script>

    <style>
        .box {
            margin: 0 auto;
            border: 1px solid #b0d4e3;
            width: 500px;
            height: 600px;
            /*Y轴导航条*/
            overflow-y: auto;
        }

        .btn {
            margin: 20px auto;
            width: 300px;
        }

        .child {
            text-align: center;
        }

        .txt {
            margin-top: 5px;
            overflow:hidden;
            /*border: 0;*/
            outline: none;
            resize:none;
        }

        .add_part {
            margin-top: 25px;
        }
    </style>

</head>
<body>

<div id="box" class="box">

    <div id="btn" class="btn">
        <button id="addtxt">添加文字</button>
        <button id="addimg">上传图片</button>
        <button id="addvoid">上传视频</button>
        <button id="deltxt">删除文字</button>
        <button id="delete">删除图片</button>
        <button id="delvido">删除视频</button>
    </div>

    <!--显示区域-->
    <div id="child" class="child">

    </div>

</div>


<script>

    // 添加文本框
     $('#addtxt').click(function () {
         $('.child').append(" </br><div><textarea class=\"txt\" οnfοcus=\"if(value=='请输入具体内容'){value=''}\"  οnblur=\"if (value ==''){value='请输入具体内容'}\">请输入具体内容</textarea></div>");
     });


    // 添加视频
    $('#addvoid').click(function () {
        $('.child').append(" </br><div class='vido'>" +
            "<input class=\"form-control\" type=\"file\" style=\"height:auto;\" id=\"video\" name=\"video\" />" +
            "<video style=\"height:auto;\" src=\"\" id=\"video0\" controls=\"controls\"></video>\n" +
            "</div>");

        //上传视频后上传按钮消失
        $('.form-control').click(function () {
            $(this).hide();
        })

        //    视频上传
         $('.form-control').change(function(){
        var file = this.files[0];
        console.log(file);
        readFile(file,$(this));
    })
    function readFile(file,element){
        // 新建阅读器
        var reader = new FileReader();
        // 根据文件类型选择阅读方式
        switch(file.type){
            case 'video/mp4':
            // case 'video/mv':
                reader.readAsDataURL(file);
                break;
        }
        // 当文件阅读结束后执行的方法
        reader.addEventListener('load',function(){
            // 如果说让读取的文件显示的话，还是需要通过文件的类型创建不同的标签
            switch(file.type){
                case 'video/mp4':
                // case 'video/mv':
                    console.log(reader);
                    element.siblings('#video0').attr('src',reader.result);
                    break;
            }
        })
    }


    });


    // 添加图片框
    $('#addimg').click(function () {
        $('.child').append(" </br> <div class=\"add_part\">\n" +
            "    <input type=\"file\" name=\"\" class=\"add_file\">\n" +
            "    <img src=\"\" class=\"cover_add\">\n" +
            "  </div>");


        // 图片上传
        $('.add_file').change(function(){
            var file = this.files[0];
            console.log(file);
            readFile(file,$(this));
        })
        function readFile(file,element){
            // 新建阅读器
            var reader = new FileReader();
            // 根据文件类型选择阅读方式
            switch(file.type){
                case 'image/jpg':
                case 'image/png':
                case 'image/jpeg':
                case 'image/gif':
                    reader.readAsDataURL(file);
                    break;
            }
            // 当文件阅读结束后执行的方法
            reader.addEventListener('load',function(){
                // 如果说让读取的文件显示的话，还是需要通过文件的类型创建不同的标签
                switch(file.type){
                    case 'image/jpg':
                    case 'image/png':
                    case 'image/jpeg':
                    case 'image/gif':
                        console.log(reader);
                        element.siblings('.cover_add').attr('src',reader.result);
                        break;
                }
            })
        }

    });



    //    点击删除事件
    //    文本
    /*$('#deltxt').click(function () {
        $('.child .txt:last').remove();
    });*/
    //图片
    $('#delete').click(function () {
        $('.child .add_part:last').remove();
    })
    //视频
    $('#delvido').click(function () {
        $('.child .vido:last').remove();
    })

</script>


</body>
</html>

其中视频部分加了隐藏的功能（即点击后按钮隐藏），这里也可以使用display：hidden来实现，但是我对于这个不熟，所以就直接用了hide（）来实现。（其他的部分如果要实现同样的功能，解决办法同此一样）
在这里插入图片描述

$(’#delete’).click(function () {
$(’.child’).remove(
1、如果是想要一次全部移除，则直接写div或者都包含的class/id就可以了
2、移除某一类，写此类的class/id就可以了
3、从下往上逐渐移除，按代码中那样写就可以了
4、class/id名要自己注意哦！！
);
})

今天又是开心的一天呢！！
在这里插入图片描述