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

我认为你应该为每一行添加重置按钮，以便你可以删除它，对于添加按钮它将被卡在页面的顶部。你只需将它放在页面的顶部。格。

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

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>

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

1 个答案: