Javascript jQuery从动态生成的字段中删除特定字段

下午好，我希望有人能帮我

我对

jQuery

很陌生，所以如果这是我犯的一个非常明显的错误，请原谅我

我有一个表单，允许我添加其他字段，我让它工作，我让它具有唯一的ID标记，但我希望当我单击我的

removeFieldTeam

时，它会删除我单击的特定字段

目前，它会自动从底部向上删除字段

---

非常感谢您的帮助。

以下是更新后的jquery代码。我测试过，它可以工作：

$(document).ready(function () {

            // Set the counter value
            var countTeam = 1;

            $("#addFieldTeam").click(function () {
                event.preventDefault();
                // If there's more than 10 fields, throw an alert
                if (countTeam == 10) {
                    alert("Only 10 fields allowed");
                    return false;
                }
                // Declaring our new div and adding the form input.
                var newField = $(document.createElement('div'))
                    .attr({
                        id: "newFieldTeam" + countTeam,
                        class: "form-group"
                    });

                newField.after().html(
                    '<label class="form-label-bold" for="fieldTeam' + countTeam + '"' + '>' +
                    'Team '+countTeam+'</label>' +
                    '<input class="form-control fullish" id="fieldTeam' + countTeam +
                    '" type="text">' +
                    '<span><a class="minuslinkreport removeFieldTeam" href="#"> - </a></span>'
                );
                // adding the new field to the page within the #fieldGroupTeam div
                newField.appendTo('#fieldGroupTeam');

                // Increase the counter by 1
                countTeam++;
                console.log(countTeam);

            });
            // Once there's no more fields to delete, throw an error.
            $(document).on('click', ".removeFieldTeam", function () {
                event.preventDefault();
                if (countTeam < 2) {
                    alert("No fields to remove");
                    return false;
                }
                countTeam--
                console.log(countTeam);
                // Decrease the counter by 1 and remove the field.
                console.log($(this).closest('div'));
                 $(this).closest('div').remove();


            });
        });

$（文档）.ready（函数（）{
//设置计数器值
var countTeam=1；
$（“#addFieldTeam”）。单击（函数（）{
event.preventDefault（）；
//如果有超过10个字段，则抛出警报
如果（countTeam==10）{
警报（“仅允许10个字段”）；
返回false；
}
//声明新的div并添加表单输入。
var newField=$（document.createElement（'div'））
艾特先生({
id:“newFieldTeam”+countTeam，
班级：“表格组”
});
newField.after（）.html(
'' +
“团队”+countTeam+“”+
'' +
''
);
//将新字段添加到#fieldGroupTeam div内的页面
newField.appendTo（“#fieldGroupTeam”）；
//将计数器增加1
countTeam++；
控制台日志（countTeam）；
});
//一旦没有要删除的字段，抛出一个错误。
$（文档）.on（'click'，.removeFieldTeam'，函数（）{
event.preventDefault（）；
if（countTeam<2）{
警报（“无需删除的字段”）；
返回false；
}
计数队--
控制台日志（countTeam）；
//将计数器减小1并删除字段。
log（$（this.closest（'div'））；
$（this）.closest（'div'）.remove（）；
});
});

对于remove按钮，我将其从id改为class，单击onclick我将删除最近的div

请测试并让我知道这是否有效

---

这是工作代码

这是更新后的jquery代码。我测试过，它可以工作：

$(document).ready(function () {

            // Set the counter value
            var countTeam = 1;

            $("#addFieldTeam").click(function () {
                event.preventDefault();
                // If there's more than 10 fields, throw an alert
                if (countTeam == 10) {
                    alert("Only 10 fields allowed");
                    return false;
                }
                // Declaring our new div and adding the form input.
                var newField = $(document.createElement('div'))
                    .attr({
                        id: "newFieldTeam" + countTeam,
                        class: "form-group"
                    });

                newField.after().html(
                    '<label class="form-label-bold" for="fieldTeam' + countTeam + '"' + '>' +
                    'Team '+countTeam+'</label>' +
                    '<input class="form-control fullish" id="fieldTeam' + countTeam +
                    '" type="text">' +
                    '<span><a class="minuslinkreport removeFieldTeam" href="#"> - </a></span>'
                );
                // adding the new field to the page within the #fieldGroupTeam div
                newField.appendTo('#fieldGroupTeam');

                // Increase the counter by 1
                countTeam++;
                console.log(countTeam);

            });
            // Once there's no more fields to delete, throw an error.
            $(document).on('click', ".removeFieldTeam", function () {
                event.preventDefault();
                if (countTeam < 2) {
                    alert("No fields to remove");
                    return false;
                }
                countTeam--
                console.log(countTeam);
                // Decrease the counter by 1 and remove the field.
                console.log($(this).closest('div'));
                 $(this).closest('div').remove();


            });
        });

$（文档）.ready（函数（）{
//设置计数器值
var countTeam=1；
$（“#addFieldTeam”）。单击（函数（）{
event.preventDefault（）；
//如果有超过10个字段，则抛出警报
如果（countTeam==10）{
警报（“仅允许10个字段”）；
返回false；
}
//声明新的div并添加表单输入。
var newField=$（document.createElement（'div'））
艾特先生({
id:“newFieldTeam”+countTeam，
班级：“表格组”
});
newField.after（）.html(
'' +
“团队”+countTeam+“”+
'' +
''
);
//将新字段添加到#fieldGroupTeam div内的页面
newField.appendTo（“#fieldGroupTeam”）；
//将计数器增加1
countTeam++；
控制台日志（countTeam）；
});
//一旦没有要删除的字段，抛出一个错误。
$（文档）.on（'click'，.removeFieldTeam'，函数（）{
event.preventDefault（）；
if（countTeam<2）{
警报（“无需删除的字段”）；
返回false；
}
计数队--
控制台日志（countTeam）；
//将计数器减小1并删除字段。
log（$（this.closest（'div'））；
$（this）.closest（'div'）.remove（）；
});
});

对于remove按钮，我将其从id改为class，单击onclick我将删除最近的div

请测试并让我知道这是否有效

---

这是演示的工作

不错的颜色选择。对于移除按钮，每次添加相同的ID时，都会使用相同的ID。因此，所有移除按钮都具有相同的ID。将它们更改为类并删除最近的div，因为您没有唯一的ID标记。每次添加一个新字段时，您都会复制+和-按钮的ID（顺便说一句，在您的演示中，这些按钮似乎不可见，可能需要检查CSS）。无论如何，您实际上只需要一个“+”按钮，您可以使用数据属性将“减号”按钮绑定到相关的文本框，或者您可以依赖HTML结构，根据需要使用jquery的“查找”、“最近”等遍历结构，查找与按钮相关的文本框。无论如何，除了标记问题，很难说你犯了这样的错误-你当前的代码只是采用了一种完全不同的方法，通过删除带有最后生成ID的文本框。没有人试图识别与单击按钮相关的文本框，所以实际上没有错误，你只需要让按钮完全执行其他操作。“我以为它是在删除具有特定ID的div“是的，但它总是最后一个，因为您只使用当前计数。它不会试图识别与单击的按钮相关的div。不管怎样，我在上面建议了你如何做到这一点，以实现你的目标。Vinod的答案就是这些方法之一。演示的颜色选择很好。对于移除按钮，每次添加相同的ID时，都会使用r