Невозможно удалить текстовое поле, используя jquery

Question

Я создал флажок, используя asp. net core как:

<div class="form-group">
    <label asp-for="EthinicalGroups" class="control-label"></label><br />
    @{int i = 0;}
    @foreach (var item in ViewBag.EthinicalGroup)
    {
        <input name="EthinicalGroup" value="@item.Id" type="checkbox" id="EthinicalGroup[@i]" />
        <label>@item.Name</label><br />
        i++;
    }
</div>

При установке флажка я добавил текстовое поле, и при снятии флажка я пытался снять флажок, но не смог удалить флажок.

$('form input[type=checkbox]').change(function (e) {
    e.preventDefault();

    if ($(this).prop("checked") == true) {
        var className = $(this).attr('id');
        b = className + "value";
        $(this).after('&nbsp;<input type="text" id="'+b+'"  size="4" name="Value">');

    }
    else {
        var className = $(this).attr('id');
        b = className + "value";
        $("#"+b).remove();
    }
});

Как снять текстовое поле при снятии флажка.

Answer 1

Вам необходимо использовать атрибут value флажка для выбора текстовых полей, так как name одинаков для всех флажков:

$('form input[type=checkbox]').change(function (e) {
    e.preventDefault();

    if ($(this).prop("checked") == true) {
        var className = $(this).attr('value');
        b = className + "value";
        $(this).after('&nbsp;<input type="text" id="'+b+'"  size="4" name="Value">');

    }
    else {
        var className = $(this).attr('value');
        b = className + "value";
        $("#"+b).remove();
    }
});