单击按钮时如何删除2个文本框

Question

我有一个表单，用户可以单击“添加”按钮来在每次单击时产生两个以上的文本框。 直到我在函数名称中添加deleterow（）为止，它的工作原理都很好。 添加该函数后，我的addrow（）不再起作用。 这是我的addrow（）代码。

<button onclick ="addRow()" value="Add Row">Add Row</button>
<button onclick ="deleterow()" value ="Reset">Reset</button>        
<script>
    var x=1
    var count=0;

    function addRow()
    {

        if(count <= 10)
        {
            var d = document.getElementById('div');
            d.innerHTML += "<input type='text' id='txta"+ x +"'><span class =wordtab></span>";
            d.innerHTML += "<input type='text' id='txtb"+ x +"'><br><br>";
            count++;
            x++
        }
        else
        {
            alert("Maximum 10 Skills");
        }
    }

这些是我的deleterow（）代码。 我也不确定每次单击删除按钮时，我的代码是否正确，无法删除2个“最新”文本框。

    function deleterow()
    {
        for(int i=1;i<=10;i++)
        {
        var element1 = document.getElementById('txta'+i); // will return element
        element1.parentNode.removeChild(element1); // will remove the element from DOM  
        var element2 = document.getElementById('txtb'+i); // will return element
        element2.parentNode.removeChild(element2); // will remove the element from DOM
        }

    }
</script>
<div id="div">

哦，最后，我该怎么做，以便每次我添加新行时，我的按钮都会自动位于所有文本框的下方。 当前，它将停留在页面顶部。 谢谢！：）

这是我的CSS

.wordtab 
        {
            min-width: 85px; 
            display: inline-block;
        }

如果我要插入11行并删除行号5和6，这是我当前的输出。

这是我删除所有11行并再添加2行时的输出

Answer 1

因为您使用的是jquery，所以可以使用click事件代替内联onclick

我认为您应该向每行添加重置按钮，以便可以将其删除，因为添加按钮将被卡在页面顶部。 您只需将其放在div之后。

查看下面的示例，这很有帮助。

---

 var x=1; var count=0; //click Event for the add button $('body').on('click','#add',function(){ if(count <= 10){ //add the two inputs + the reset button to a div with class 'line' then append //this div to #div $('#div').append("<div class='line'><input type='text' id='txta"+ x +"'><span class='wordtab'></span><input type='text' id='txtb"+ x +"'><button class='delete' value='Reset'>Reset</button></div>"); count++; x++ } else alert("Maximum 10 Skills"); }); //click Event for the delete button $('body').on('click','.delete',function(){ //when the user click on delete get the parent div with class 'line' of clickable //button and remove it $(this).closest('.line').remove(); count--; }); 

 .wordtab { min-width: 85px; display: inline-block; } .line{ margin-bottom: 15px; } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div id="div"></div> <button id='add' value="Add Row">Add Row</button>