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

时间:2018-01-03 12:14:42

标签: javascript jquery

下午好,我希望有人可以帮助我。

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

我有一个表单,允许我添加其他字段,我有它工作,我已经得到它,所以他们有唯一的ID标签,但我喜欢这样,当我点击我的removeFieldTeam它删除我点击的具体字段。

目前,它会自动从底部向上移除字段。

JSFiddle

感谢任何帮助。

1 个答案:

答案 0 :(得分:2)

这是更新的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();


            });
        });

对于删除按钮,我将其从id更改为class,然后onclick我将删除最近的div。

如果有效,请测试并告诉我。

这是工作fiddle