如何在javascript中删除输入文本字段

Question

实际上，我想通过单击按钮来添加文本字段。 它正在工作，但是我无法通过单击“删除”按钮来删除文本字段。 请参见下面的代码：

<script type="text/javascript">

var i = 1;
function more_fields() {

 i++;
 var objTo = document.getElementById('more_fields')
var divtest = document.createElement("div");
divtest.setAttribute("class", "form-group removeclass"+i);
var rdiv = 'removeclass'+i;

divtest.innerHTML = '<div><input type="text" name="comp[]" id="component" 
value="" placeholder="Product" /> <input type="number"  
name="quantity[]" id="quantity" placeholder="Quantity" /> <input 
type="number"  name="rate[]" id="rate" placeholder="Rate" /> <input 
type="number"  name="amount[]" id="amount" placeholder="Amount" readonly /> 
<button class="btn btn-danger" type="button" onclick="remove_more_fields('+ 
 i +');" style="height:2em; width:3%;">X</button></div>';

objTo.appendChild(divtest)
}

function remove_more_fields(rid) {
   $('.removeclass'+rid).remove();
}
</script>


  <div class="form-group fieldgroup" id="more_fields">
  <div>
   <input type="text" name="comp[]" id="component" value="" 
                       placeholder="Product" /> 
   <input type="number"  name="quantity[]" 
   id="quantity" placeholder="Quantity"/>
    <input type="number"  name="rate[]" 
    id="rate" placeholder="Rate" /> 
    <input type="number"  name="amount[]" 
    id="amount" placeholder="Amount" readonly/> 
    <button class="add_field_button" 
    type="button" onclick="more_fields()"> Add</button>
    </div>
    <br/>
    </div>

我怎么能得到那个结果？ 我想计算数量*比率并在“金额”字段中自动显示结果。 如果我更改数量或费率，金额将自动更改并显示结果。 请建议我...谢谢。

Answer 1

试试这个来获得数量：

<div class="form-group fieldgroup" id="more_fields">
  <div>
    <input type="text" name="comp[]" id="component" value="" placeholder="Product" />
    <input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" />
    <input type="number" name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" />
    <input type="number" name="amount[]" id="amount" placeholder="Amount" readonly/>
    <button class="add_field_button" type="button" onclick="more_fields()"> Add</button>
  </div>
  <br/>
</div>
<script>
  var i = 1;

  function more_fields() {

    i++;
    var objTo = document.getElementById('more_fields');
    var divtest = document.createElement("div");
    divtest.setAttribute("class", "form-group removeclass" + i);
    var rdiv = 'removeclass' + i;
    divtest.innerHTML = '<div><input type="text" name="comp[]" id="component" value="" placeholder="Product" /> <input type="number" name="quantity[]" id="quantity" placeholder="Quantity" onchange="getAmount(this)" /> <input type="number"  name="rate[]" id="rate" placeholder="Rate" onchange="getAmount(this)" /> <input type="number"  name="amount[]" id="amount" placeholder="Amount" readonly /> <button class="btn btn-danger" type="button" onclick="remove_more_fields(' + i + ');" style="height:2em; width:3%;">X</button></div>';

    objTo.appendChild(divtest)
  }

  function remove_more_fields(rid) {
    $('.removeclass' + rid).remove();
  }
function getAmount(el)
{
console.log(el.parentElement);
var inputs = el.parentElement.getElementsByTagName('input');

inputs[3].value = (parseInt(inputs[1].value) * parseFloat(inputs[2].value));

}
</script>

这是正在工作的JSFiddle

Answer 2

给“删除按钮”这样的onclick函数-onclick =“ remove_more_fields（i）;” 。 这将使具有i值的函数调用传递给remove_more_fields函数。

我错过了告诉您的是，您可以将整个divtest.innerHTML定义包含在- <div>...</div> （请注意此处的引号），因为我的编辑器显示了跨越多行字符串的错误。 这可能触发了对i的评估，并且对我来说效果很好。