JS_js添加规格，js加jq添加商品规格-小白菜博客
返回数据：
JS_js添加规格，js加jq添加商品规格-小白菜博客
代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"> </script>
    <title>添加规格</title>
</head>
<body>
    <div class="flex">
        <div id="specifications" class="flex"></div>
        <input type="text" id="titlevalue" placeholder="请输入标题"/>
        <div class="add" onclick="addtitle()">添加</div>
    </div>
    <div id="txt" ></div>
</body>
</html>
<script>
    var title = [];             //标题数组
    var txt = [];               //标题加副标题数组
    i = -1;

    //添加标题
    function addtitle(){
        i++
        var word = document.getElementById("titlevalue").value
        if(word){
            $("#specifications").append(`<div class="titlesytle" id="${i}del">${word}<div class="cha" οnclick="deltitle(${i})">X</div></div>`)
            title.push({"title":word, "key":i})
            $("#txt").append(`
                <div class="flex txtstyle" id="${i}del1">
                    <div class="txt">${word}:
                        <div class="txt_">
                            <div id="${i}" class="txtid"></div>
                            <input type="text" id="${i}value" placeholder="请输入${word}副标题"/>
                            <div class="add" οnclick="addtxt(${i})">添加</div>    
                        </div>
                    </div>
                </div>
            `)
            txt.push({"key":i,"title":word,"txt":[]})
         }
         document.getElementById("titlevalue").value = ''
         console.log(title)
    }

    //添加副标题
    function addtxt(i){
        var timestamp = new Date().getTime()   //时间戳  随机id
        var wordtxt = document.getElementById(i+"value").value
        if(wordtxt){
            $("#"+i).append(`<div class="wordtxt" id="${timestamp}">${wordtxt}<div class="cha" οnclick="deltxt(${i},${timestamp})">X</div></div>`)
            txt[i].txt.push({"key":timestamp,"name":wordtxt})
        }
        document.getElementById(i+"value").value = "";
         console.log(txt)
    }

    //删除标题
    function deltitle(i){
        document.getElementById(i+"del").remove(i);
        document.getElementById(i+"del1").remove(i);
        title.splice(i,1);
        // txt.splice(i,1);
        txt[i]=null
        console.log(title)
        console.log(txt)
    }

    //删除副标题
    function deltxt(i,timestamp){
        console.log(i,timestamp)
        document.getElementById(timestamp).remove();
        txt[i].txt.forEach((item,ii) => {
            if(item.key == timestamp){
                txt[i].txt.splice(ii,1);
            }
        });
        console.log(txt)
    }
</script>
<style>
    .flex{
        display: flex;
        flex-wrap: wrap;
    }
    #specifications div{
        margin-right: 5px;
    }
    .add{
        width: 100px;
        height: 30px;
        line-height: 30px;
        border: 1px solid #000;
        text-align: center;
        border-radius: 7px;
        margin-left: 10px;
    }
    .titlesytle{
        display: flex;
        align-items: center;
        padding: 2px 5px;
        color: #fff;
        background: #000;
        border-radius: 7px;
    }
    .txt{
        padding-bottom: 10px;
        line-height: 30px;
    }
    .txt_{
        display: flex;
        align-items: center;
        margin-left: 50px;
    }
    .txtstyle{
        margin-top: 8px;
        background: #f5f5f5;
    }
    .txtid{
        display: flex;
        align-items: center;
    }
    .txtid div{
        margin-right: 5px;
    }
    .wordtxt{
        display: flex;
        align-items: center;
        padding: 2px 5px;
        color: #fff;
        background: rgb(83, 68, 68);
        border-radius: 7px;
    }
    .cha{
        width: 20px;
        height: 20px;
        text-align: center;
        line-height: 20px;
        border-radius: 50%;
        background: red;
        margin-left: 5px;
    }
    input{
        width: 200px;
        height: 30px;
        border: none;
        outline:none;
    }
    input:active{
        border: none;
    }
</style>