javascript - 在输入(数字)的按键上添加/删除输入(文本)

Question

我已经研究这个问题有一段时间了，但似乎无法完全理解。我试图让它在用户添加或删除数量(输入类型数字)时添加或删除相关文本输入。

我知道我可以通过单击按钮或链接来删除来完成此操作，但我希望这完全基于所述数字输入字段的值。

这是我的尝试，它正确地添加了它们，但一旦减少数量就不会删除它们。

var x = 0;

$('.quantity').on('keyup', 'input', function() {
    var parent = $(this).closest('.quantity');

    x++;
    var name = "student-name" + x;

    $('<br>').appendTo(parent);
    $("<input type='text' value='' placeholder='Student Name' />")
     .attr("id", name)
     .attr("name", "student-name[]")
    .addClass('student-name')
     .appendTo(parent);
});


$('.quantity').on('keydown', 'input', function() {
    $(this).closest('input.student-name').remove();
});

https://jsfiddle.net/r1zqtftr/3/

Answer 1

检查这个fiddle

JS:

var x = 0;

$('.quantity').on('keyup', 'input', function (e) {

    if (e.which == 8) {
         $(this).parent().find('input.student-name').last().remove().end().parent().find("br").last().remove();
    } else {
        var parent = $(this).closest('.quantity');

        x++;
        var name = "student-name" + x;

        $('<br>').appendTo(parent);
        $("<input type='text' value='' placeholder='Student Name' />")
            .attr("id", name)
            .attr("name", "student-name[]")
            .addClass('student-name')
            .appendTo(parent);
    }
});