Javascript 复制具有相同类的元素并将它们放在它们自己下面？

更新：我加入这个代码笔是因为我对代码段有问题

我用bootstrap4做了这个布局

我想实现的是，当点击“添加新项目”时，一个新的空行将插入下面。由于站点需要响应，所以不可能将所有标签放在一行中，将字段放在另一行中，否则页面将在较小的屏幕上混乱不堪

我找到了一些关于如何使用jQuery克隆和插入的帖子，我试过了，但我的问题仍然存在

我硬编码一些脚本，不优雅，他们没有做我想要的。布局混乱

代码如下：

//添加空项目字段
让addRow=$（'.additem'）；
//单击“添加字段”时
addRow.on（'单击'，函数（））{
让newRow=$（'.need to dup'）.clone（），
target=$（'.needtodup'）.parent（）；
目标[0]。追加（新行[0]）；
目标[1]。追加（新行[1]）；
目标[2]。追加（newRow[2]）；
目标[3]。追加（newRow[3]）；
//console.log（newRow，newRow[3]）
})

数量
项目
评论
去除
添加另一项

很难说出你想做什么。你的“乱七八糟”的展示在我看来很不错，我也会这样做。如果尝试复制整行（标签和全部）：

---

不要复制每个项目，而是一次复制整行

//添加空项目字段
让addRow=$（'.additem'）；
//单击“添加字段”时
addRow.on（'单击'，函数（））{
让lastRow=$（'.row'）。last（）
lastRow.after（lastRow.clone（））；
})

数量
项目
评论
去除
添加另一项

以下是我的解决方案：

• 使用克隆

  .row

  元素
• 用于查找任何标签并将其从克隆中删除
• 克隆到

  .item表单

  元素中

---

//添加空项目字段
让addRow=$（'.additem'）；
//单击“添加字段”时
让original=$（'.row'）；
addRow.on（'单击'，函数（））{
让克隆=$（原始）.clone（）；
$（克隆）.find（'label'）.remove（）；
$（'.item form'）。追加（克隆）；
})

正文{
字体系列：“流沙”，无衬线；
}
导航{
背景：#66a6ff；
背景图像：线性梯度（120度，#66a6ff 0%，#89f7fe 100%）；
线高：70px；
颜色：#fff；
字体大小：24px；
字号：700；
盒子阴影：0px 0px 51px 0px rgba（0,0,0,0.08），0px 6px 18px 0px rgba（0,0,0,0.05）
}
按钮，.添加项目{
转换：所有.2易入易出；
}
/* ***
客户和交付信息样式
*** */
输入，。选择驱动程序{
宽度：100%；
边缘底部：.5rem；
高度：40px；
}
.表格管制{
边框颜色：#A9A9；
}
字段集{
背景色：白色；
边框：1px实心#e9ecef；
边界半径：10px；
填充：5px20px18px；
保证金：20px自动；
盒影：0 6px 15px rgba（36,37,38,0.08）；
}
传奇{
字号：18px；
宽度：自动；
填充：0 15px；
文本对齐：居中；
}
#循环复选框{
位置：相对位置；
顶部：-8px；
}
输入[类型=复选框]{
显示：内联块；
页边距底部：0；
宽度：30px；
高度：30px；
背景重复：无重复；
背景位置：中心；
背景尺寸：包含；
-webkit外观：无；
大纲：0；
边界：无；
}
输入[类型=复选框]：选中{
背景图像：url（'data:image/svg+xml；utf8'）；
}
输入[类型=复选框]：未（：选中）{
背景图像：url（'data:image/svg+xml；utf8'）；
}
/* ***
项目详细样式
*** */
.添加项目{
边框：3个虚线；
字体大小：16px；
颜色：#C3C3；
文本对齐：居中；
利润率：20px0；
}
.添加项目p{
保证金：0自动；
线高：40px；
}
。添加项目：悬停{
颜色：#9898；
背景色：rgba（2152142140.56）；
光标：指针；
}
/* ***
注释和按钮样式
*** */
文本区{
高度：自动；
宽度：100%；
页边距底部：0；
}
.保存按钮{
边框：1px实心；
边界半径：5px；
字号：18px；
字号：500；
线高：40px；
盒影：0 6px 15px rgba（36,37,38,0.08）；
保证金：20px自动；
}
.保存按钮：悬停{
背景色：#66a6ff；
边框颜色：#66a6ff；
}
.删除项目按钮{
颜色：#f68ba2；
边框：1px实心#A9A9；
边界半径：5px；
高度：40px；
}
.删除项目按钮：悬停{
颜色：#eee；
背景色：#f68ba2；
边框颜色：#fff；
}

数量
项目
评论
去除
添加另一项

我认为最适合您的解决方案是：

克隆分区行

使用索引更改name属性（这可能会有很大问题）

从克隆的元素中删除标签

我做了一个简单的例子：

$（文档）.ready（函数（）{
$（“.additem”）。在（“单击”，函数（）{
变量行=$（“.row”，“section.item表单”），
first=rows.first（），last=rows.last（），clone=first.clone（）；
console.log（第一）；
clone.insertAfter（last.find（“[name！=”][name]”）。每个（函数（）{
var name=$（this.attr（“name”）.split（“-”[0]；
$（this）.slides（“label”）.remove（）；
$（this.attr（“name”，name+“-”+rows.length）；
});
});
});

数量
项目
评论
去除
添加另一项

您的预期结果是什么？
target
包含一个元素。但是如果你
addRow.on('click', function() {
  let newRow = $('.row')[0].clone();
  newRow.appendTo($('.item-form')[0]);
});