Javascript 将值从动态创建的输入复制到文本区域

我有3列的引导行。每列都有输入。我有“添加行”按钮，它可以添加另一行和3列。每个输入值都复制到textarea。但我有问题。我只能从第一行复制值。如何从所有输入复制值？第二个问题，我如何格式化这样的输出

第1行 数据-1 数据-2 数据-3

第2行 数据-4 数据-5 数据-6

添加行
$（'#添加'）。单击（函数（）{
$（'.row.inputs:last'）.clone（）.insertAfter（“.row.inputs:last”）.val（“”）；
});
$（“输入”）。在（'keyup'，函数（）上{
var值=”；
$（“输入：文本”）。每个（函数（i）{
var text=$（this.prev（“label”）.text（）；
值+=（i>0？\n）：“）+此。值+”+文本；
});
$（“textarea”）.val（值）；
});

这就是你要找的吗

否。若要使新添加的输入也触发我们的

keyup

，请将

$（“输入”）。在（'keyup'，function（）{

上更改为

$（文档）。在（'keyup'，'input'，function（）{

$（'#添加'）。单击（函数（）{
$（'.row.inputs:last'）.clone（）.insertAfter（“.row.inputs:last”）；
$（'.row.inputs:last input'）.val（“”）
console.log（$（“.row.inputs”）.length）
如果（$（“.row.inputs”）.length==2）{
$（'.row.inputs:last.col-sm-4:last'）.css（“float”，“left”）。在（'remove row'之后）
} 
});
$（文档）.on（'keyup'，'input'，function（）{
updateTextarea（）
});
$（文档）.on（'click'，.removeText'，函数（）{
$（this.prev（“输入”）.val（“”）
updateTextarea（）
});
$（文档）.on（'单击'，“.removeow”，函数（）{
$（this）.closest（“.row”）.remove（）
updateTextarea（）
});
函数updateTextarea（）{
var值=”；
$（“.row.inputs”）。每个（函数（i）{
值+=“行”+（i+1）+”：”
$（this）.find（“input”）.each（函数（x，e）{
$（this.next（“button”）.css（“display”，this.value.length>0？”首字母“：“none”）
var text=$（this.prev（“label”）.text（）；
values+=this.value+“”+文本；
})
值+=“\n”
});
$（“textarea”）.val（值）；
}

textarea{
高度：200px；
宽度：400px；
}
.removext{display:none；}

删除文本
删除文本
删除文本
添加行

对于动态添加的元素，必须使用事件委派

您应该使用

.on（）

方法绑定click事件处理程序

事件委派允许我们将单个事件侦听器附加到 父元素，该元素将为匹配 选择器，无论这些子体现在存在还是添加到 未来

了解有关事件委派的更多信息

$（'#添加'）。单击（函数（）{
var anotherRow=$（'.row.inputs:eq（0）'）.clone（）；
另一行。append（'removetext'）；
另一行。查找（'input'）。每个（函数（）{
$（this.val（“”）；
});
另一行insertAfter（“.row.inputs:last”）；
});
$（文档）.on（'keyup'，'input'，function（）{
var值=”；
$（“输入：文本”）。每个（函数（i）{
var text=$（this.prev（“label”）.text（）；
值+=（i%3==0？\n行“+（i/3）++”“：”“）+此。值+”“+文本；
});
$（“textarea”）.val（值）；
});
$（文档）.on（'click'，.removeText'，函数（）{
$（this）.closest（'.inputs'）.remove（）；
var值=”；
$（“输入：文本”）。每个（函数（i）{
var text=$（this.prev（“label”）.text（）；
值+=（i%3==0？\n行“+（i/3）++”“：”“）+此。值+”“+文本；
});
$（“textarea”）.val（值）；
})；

添加行

Yes！！但是如果新行没有任何值就好了。@MMPL1更新了，看一看是的！这就是我要找的。我还有一件事。你能在动态添加的每一行旁边添加“删除输入”按钮吗？我还想从文本区域删除这些值。@MMPL1像这样吗？@MMPL1，看看我的答案。亲爱的！你能添加吗“删除已创建行旁边的行”？我还想从文本区域中删除此行中的值。我们快到了！第一行不应该有删除选项。只有第二行、第三行等。小可视化-@MMPL1，现在看看。为什么我的答案不好？

<div class="container">
<div class="row inputs">
    <div class="col-sm-4">
        <input type="text" name="szerokosc" class="entry" id="szerokosc_1" value="" />
    </div>
    <div class="col-sm-4">
        <input type="text" name="wysokosc" class="entry" id="wysokosc_1" value="" />
    </div>
    <div class="col-sm-4">
        <input type="text" name="dlugosc" class="entry" id="dlugosc_1" value="" />
    </div>
</div>
<div class="row">
    <div class="col-sm-12">
        <button id="add">add row</button>
    </div>
</div>
</div>
<textarea class="box" name="result" rows="5"> </textarea>

$('#add').click(function(){
$('.row.inputs:last').clone().insertAfter(".row.inputs:last").val('');
});
$("input").on('keyup',function() {
    var values = "";
    $("input:text").each(function(i) {
        var text=$(this).prev("label").text();
        values +=  (i > 0 ? "\n" : "") + this.value+ " "+text;
    });
    $("textarea").val(values);
});