返回数据：
代码：
<!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>