當我點擊一個按鈕時，如何刪除2個文本框

Question

我有一個表單，用戶可以點擊添加按鈕在每次點擊後生成2個以上的文本框。它工作得很好，直到我添加了函數名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你可以使用單擊事件，而不是在線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>