javascript - 使用 Bootstrap Touchspin 添加和删除输入元素

Question

我正在尝试使用 bootstrap touchspin 动态创建一系列输入区域，这些区域稍后将用于创建单词数组，但我在创建元素时遇到了一些问题。我可以创建元素，但问题是删除它们，我正在尝试让它工作

    <script>
    var limit = 40;
    var counter= 0;
        $("input[name='cant']").TouchSpin({
            min: 0,
        }).on('change', function (){ 
            var number = $(this).val();

            if ((number) >= limit)  {
                alert("Word limit reached");
                number=limit;
                }
                if(number >= counter){
                    for(i=counter;i<number;i++) {
                    var newdiv = document.createElement('div');
                    newdiv.innerHTML = "<br><input type='text' id='word"+i+"'>";
                    document.getElementById("ingresar").appendChild(newdiv);
                    counter++;
                    }else{
                        for(i=counter;i>number;i--){
                            document.getElementById("word"+i).remove();
                            counter--;
                        }
                    }
                }

        ;});
    </script>

我有什么遗漏的吗？我的猜测是，使用元素 ID 会弄乱我的代码。还有其他更有效的方法吗？

Answer 1

sintaxis(和逻辑)中有一些错误:用 $('#word' + i).parent().remove() 修复

    if(number >= counter){
                    for(i=counter;i<number;i++) {
                    var newdiv = document.createElement('div');
                    newdiv.innerHTML = "<br><input type='text' id='word"+i+"'>";
                    document.getElementById("ingresar").appendChild(newdiv);
                    }
                    counter=number;
                }else{
                    for(i=counter;i>number-1;i--){
                        $('#word' + i).parent().remove()
                        }
                        counter=number;
                    }