使用javascript呈现javascript时出现问题

基本上，我在尝试解决这个问题时遇到了麻烦，我想用JS（使用jquery）创建一些控件，但我也想为它们添加一个删除按钮，我的尝试如下： html:

件
加块
提交

而JS：

                $(document).ready(function(){
                 var counter = 1;
                    $("#addpiece").click(function (e) {

                        $("#pieces").append('<label>Piece ' + counter + ': </label><br>' +
                              '<p id=added'+counter+'><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + 
                              '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + 
                              counter + '" required>cm x ' +
                              '<input min=0 step=0.1 style=width:70px; type="number" name="height' + 
                              counter + '" required>cm x ' +
                              '<input min=0 step=0.1 style=width:70px; type="number" name="length' + 
                              counter + '" required>cm</div></div>' +
                              '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + 
                              '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + 
                              counter + '" required>KG<br>' +
                              '<input type=hidden name=counter value=' + 
                              counter + '><button class="btn btn-danger" id="remove' + counter + '">X</button>\<script type="text\/javascript"\>' +
                              '$("#remove' + counter + '").click(function (e) { $( "#added'+counter+'" ).remove(); return false; }  \<\/script\>' +
                              '</div></div></p><br>');
                        counter++;
                        return false;
                     });


                  });

$（文档）.ready（函数（）{
var计数器=1；
$（“#添加件”）。单击（功能（e）{
$（“#件”）。追加（'件'+计数器+'：
'+
“
维度：'+
“厘米x”+
“厘米x”+
“厘米”+
“重量：”+
“千克
”+
“X”+
“$”（“#删除“+计数器+”）。单击（函数（e）{$（“#添加了“+计数器+”））。删除（）；返回false；}”+
“

”）；
计数器++；
返回false；
});
});

查看我的小提琴，以获得更清晰的视图：

---

由于您正在动态创建删除按钮，请使用事件委派来注册删除处理程序

另外，如果您有一个容器元素，它将包含一个工件的所有元素，就像我添加的（

）来包装所有元素一样，这会更好

$(document).ready(function () {
    var counter = 1;
    $("#addpiece").click(function (e) {
        $("#pieces").append('<div class="piece"><label>Piece ' + counter + ': </label><br>' + '<p id=added' + counter + '><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="height' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="length' + counter + '" required>cm</div></div>' + '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + counter + '" required>KG<br>' + '<input type=hidden name=counter value=' + counter + '><button type="button" class="btn btn-danger remove" id="remove' + counter + '">X</button>' + '</div></div></p><br></div>');
        counter++;
        return false;
    });
    $("#pieces").on('click', '.remove', function(){
        $(this).closest('.piece').remove()
    })

});

$（文档）.ready（函数（）{
var计数器=1；
$（“#添加件”）。单击（功能（e）{
$（“#件”）.append（'Piece'+计数器+'：
'+'
尺寸：'+'cm x'+'cm x'+'cm'+'重量：'+'KG
'+'x'+'

'）；
计数器++；
返回false；
});
$（“#件”）。在（'单击'，'删除'，函数（）上{
$（this）.最近（'.piece'）.remove（）
})
});

也读

---

演示：

那么问题出在哪里JSFIDLE上的X没有删除好的一个，也改变了，以解决即将出现的计数器问题^另一个问题是，如果计数器为0，我试图禁用go按钮，不明白为什么它不工作？@javiqualmsdog你从1开始计数器，所以谢谢，但选择不这样做，mor例如，如果我删除节点1，然后添加一个按钮，那么无论我打开哪个节点（如果有意义lol），我都会有2倍的时间来创建数组并从数组中删除每个节点，并检查数组是否为空以禁用按钮，但不值得，因为它并不重要。

$(document).ready(function () {
    var counter = 1;
    $("#addpiece").click(function (e) {
        $("#pieces").append('<div class="piece"><label>Piece ' + counter + ': </label><br>' + '<p id=added' + counter + '><div class=row><div class=col-lg-2><label>Dimensions:</label></div>' + '<div class=col-lg-10><input min=0 step=0.1 style=width:70px; type="number" name="width' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="height' + counter + '" required>cm x ' + '<input min=0 step=0.1 style=width:70px; type="number" name="length' + counter + '" required>cm</div></div>' + '<div class=row><div class=col-lg-2><label>Weight:</label></div>' + '<div class=col-lg-10><input min=0.001 step=0.001 style=width:70px; type="number" name="weight' + counter + '" required>KG<br>' + '<input type=hidden name=counter value=' + counter + '><button type="button" class="btn btn-danger remove" id="remove' + counter + '">X</button>' + '</div></div></p><br></div>');
        counter++;
        return false;
    });
    $("#pieces").on('click', '.remove', function(){
        $(this).closest('.piece').remove()
    })

});